2013-04-17 2 views
0

Я хотел бы, когда пользователь нажимает на изображение в открытом всплывающем окне, содержимое будет изменен с URL в IFRAME (не близко/открыто, но склейка)hs.htmlExpand на открытом всплывающем окне по изображению нажмите

I есть галерея с hs.transitions = ['expand', 'crossfade'].

Следующая конструкция закроет старое всплывающее окно и откроет новый (и сломает слайд-шоу), но мне нужен тот же эффект (crossfade), как пользователь, щелкнув следующее изображение.

hs.allowMultipleInstances = false; 
hs.Expander.prototype.onImageClick = function() 
{ 
    return hs.htmlExpand(null, { objectType: 'iframe', src: 'url' }); 
}; 

Как это сделать?

Образец - http://jsfiddle.net/xCnfE/4/

ответ

1

Вы не можете кроссфейд от изображения к HTML всплывающего окна, если HTML всплывающее окно не является частью галереи. Вместо этого вы можете создать обычный iframe, который покрывает изображение с помощью jQuery и показывать этот iframe только при нажатии на изображение (onImageClick). Пожалуйста, см http://jsfiddle.net/roadrash/B7sDG/

hs.Expander.prototype.onImageClick = function (sender) { 
    $('<iframe src="'+this.custom.url+'" frameborder="0"></iframe>').css({ 
     position: 'absolute', 
     top: '0', 
     height: '100%', 
     width: '100%', 
     background: '#fff', 
     zIndex: 20 
    }).appendTo(sender.wrapper); 
    return false; 
}; 


url передается с помощью IFRAME srchs.custom в onclick:

<a href="large-image.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions, {url: 'http://highslide.com/'})"> 
    <img src="thumbnail.jpg" alt="Caption Text" /> 
</a>