Динамические ссылки и jQuery Lightbox проблема: загрузка изображения в лайтбокс ... полностью в тупик! - PullRequest
Новая
       2

Динамические ссылки и jQuery Lightbox проблема: загрузка изображения в лайтбокс ... полностью в тупик!

2 голосов
/ 06 августа 2010

У меня есть функция, которая динамически создает ссылки для фотогалереи.Функция также создает увеличенное изображение в качестве фонового изображения элемента div при нажатии на миниатюру.То, что я хочу сделать, - это третье событие, когда пользователь щелкает увеличенное изображение в div, jQuery Fancybox загружает еще большую версию изображения, отображаемого в div.Проблема в том, что ссылка на используемый мной тег привязки создается динамически, и я знаю, что Fancybox анализирует HTML, когда DOM готов ... к сожалению, моя функция изменяет DOM, добавляя тег привязки для полноразмерного изображения.,Мне нужна помощь в использовании параметров Fancybox для указания атрибута href для плагина.Мне жаль, что это было так затянуто ... вот код.

jQuery: 

function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat');
$('#photolarge a').attr(
    {   href: fullSize
        //rel: 'lightbox',  
    }
    );

$("#lightboxlink").click(function(){
    $('#lightboxlink').fancybox({
        'autoDimensions' : false,
        'width' : 'auto',
        'height' : 'auto',
        'href' : fullSize
        });


    });




return false;

}

Фрагмент HTML 

<div id="photolarge">
   <a id="lightboxlink" href="#"></a>
</div>
        <div id="phototable">
            <ul id="photorow1">
                <li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
            </ul>
        </div>

Последующие CSS: 

#photolarge {
width: 590px;
height: 400px;
margin-left: 7px;
border: 2px solid;
background: none;}

#phototable {
width: 590px;
height: 300px;
border: 2px solid;
margin: 10px 0 0 7px;}

#phototable img {
cursor: pointer;}

#phototable ul {
list-style: none;
display: inline;}

#phototable li {
padding-left: 10px;}

#lightboxlink {
display: block;
height: 100%;
width: 100%;}

Любая помощь будет принята с благодарностью !!!

1 Ответ

3 голосов
/ 06 августа 2010

Вы можете использовать .live() для обработчика событий и .triggerHandler() для немедленного открытия лайтбокса, например: 

$("#lightboxlink").live('click', function(e){
    $(this).filter(':not(.fb)').fancybox({
        'autoDimensions' : false,
        'width' : 'auto',
        'height' : 'auto',
        'href' : fullSize
     }).addClass('fb');
     $(this).triggerHandler('click');
     e.preventDefault(); //prevent opening in new window
});

Это выполняется.fancybox() по ссылке, но только если мы не уже запустили ее, что мы отслеживаем с добавлением класса .fb.Будь то новое или новое связывание, нам нужно вызвать обработчик click, который fancybox слушает, чтобы открыть.

...