jQuery: слайд только с правой стороны

Question

Я понял, как интегрировать функцию переключения слайдов jQuery, чтобы сделать мой снимок субтитров в моем/изображении, но он скользит в нижнем правом углу, и я хочу, чтобы он слайд только с правой стороны.

Я должен сохранить форматирование абзаца и положение в нижней части надписи, причем полупрозрачная белая прокладка охватывает всю высоту чувствительного изображения. Любая помощь высоко ценится!

ОБНОВЛЕНИЕ: Кажется, я работаю над этим jsFiddle, но все же не на веб-сайте. Демо: http://jsfiddle.net/tyuth1sr/16/

Активная страница: http://parkerrichard.com/studiogreen/html/schools-caption-test.html

JQuery:

$(window).load(function() { 
     $('.flexslider').flexslider({ 
     animation: "fade" 
     }); 
    }); 

    $("#slideshow").click(function() { 
     $(".flex-caption").toggle("slide"); 
    }); 

CSS:

/* flexslider styling */ 

.flexslider { 
    background:none !important; 
    border:none !important; 
    box-shadow:none !important; 
} 

.slides { 
    overflow: hidden !important; 
} 

.right { 
    right: 0; 
    margin-bottom: 0px; 
} 

.flex-caption { 
    position: absolute; 
    text-align: left; 
    background:rgba(255, 255, 255, 0.7); 
    z-index: 1; 
    padding: 20px; 
    width: 295px; 
    padding-top: 100%; 
    bottom: 0px; 
    display: none; 
} 

.show-caption { 
    position: absolute; 
    top: 48%; 
    right: 100px; 
    z-index: 100; 
    opacity: 0.8; 
    filter: alpha(opacity=80); /* For IE8 and earlier */ 
    pointer-events: none; 
} 

Answer 1

Если вы хотите использовать JQuery toggle() функцию, чтобы заставить их скользить справа, вам нужно будет использовать JQuery UI effects
EDIT:
Вы сказали, что вы уже используете JQuery UI, так что просто использовать конфигурацию direction:
$('.caption-content').show("slide", { direction: "left" }, 1000);
JQuery UI API on toggle("slide")