#jquery #jquery-ui-dialog
#jquery #jquery-ui-dialog
Вопрос:
У меня есть список фотографий:
<div>
<a href="#" class="open-dialog" id="17"><img src=/upl/thumb_100_100_2144473683ec519.jpg /></a>
</div>
<div>
<a href="#" class="open-dialog" id="18"><img src=/upl/thumb_100_100_23688dddd187dc7.jpg /></a>
</div>
<div>
<a href="#" class="open-dialog" id="19"><img src=/upl/thumb_100_100_684889213b56545.jpg /></a>
</div>
<div id='photo-content'></div>
после нажатия на большой палец я получаю диалоговое окно пользовательского интерфейса jQuery:
$(document).ready(function(){
$('.open-dialog').live('click', function() {
var id = $(this).attr('id');
$("#photo-content").load('/photo/' id).dialog({ //loads php file with full size photo and other content
width: '700px',
resizable: false,
modal: true,
buttons: {
'Close': function() { $(this).dialog('close'); }
},
});
});
});
он успешно загружается со всеми необходимыми мне данными.
Итак, теперь я хочу иметь next/prev ссылки внутри загруженного диалога. Диалоговое окно должно быть закрыто и перезагружено с новым содержимым после нажатия next . Или, возможно, он не закрыт, просто перезагружен…вот где я застрял.
HTML:
...
<a href="#" class="next">NEXT</a>
...
javascript:
$(document).ready(function(){
$('.next').live('click', function() {
$('#photo-content').dialog('close');
var next_id = <?=$next_photo?>;
$("#photo-content").load('/photo/' next_id).dialog({
width: '700px',
resizable: false,
modal: true,
buttons: {
'Close': function() { $(this).dialog('close'); }
});
});
});
Я пробовал этот способ, но после каждого нажатия на next я получаю все больше и больше открытых диалоговых окон.
Есть предложения?
Заранее спасибо.
Комментарии:
1. Не могли бы вы опубликовать рабочую страницу, чтобы мы могли ее просмотреть? jsfiddle. net — хороший способ быстрого обмена такого рода кодом. Вашу проблему должно быть довольно просто исправить, как только мы ее получим.
2. Кажется, что ваша жизнь была бы намного проще, если бы вы просто использовали Colorbox colorpowered.com/colorbox . Включает поддержку группировки изображений / автоматических стрелок next и prev.
3. Спасибо за предложения. Я пробовал другие лайтбоксы jQuery раньше, но безуспешно (потому что я хотел загрузить с URL не только фотографию, но и гораздо больше контента с другими диалогами внутри). Поэтому я решил использовать диалоговое окно пользовательского интерфейса jQuery. Но это действительно было проще сделать с Colorbox. Еще раз спасибо, особенно Т Нгуен.