Динамическое добавление картинок и fancybox
Ребята, ну скажите, правильно ли я добавляю картинки
$('#xxxxx').html('<a rel="gallery" title="xxxxx" href="/xxxx/papk1/1.jpg"><img src="/xxxx/papka2/1.jpg" /></a>') и как сделать чтоб при этом работало $('a[rel=gallery]').fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 500, 'speedOut' : 500 }); $("ххх").on('click','.xxxxx',function(){ не помог |
xxxxxxxxxx,
в чём проблема? |
xxxxxxxxxx,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Проблема в том что, при таком добавлении картинок, fancybox не увеличивает их
|
xxxxxxxxxx,
так может ссылки на большую картинку нет? |
xxxxxxxxxx,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css"> <style type="text/css"> .fancybox-inner a{ color : #000000; margin-bottom: 2px; display: inline-block; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title a{ color : #FFFFFF; } .check{ border: 5px solid #0000FF; } .fancybox-nav { margin-top: 20px; } .hot{ border: 1px dashed Gray; padding: 5px; height: 200px; width: 200px ; text-align: center; } .hot img{ margin: 20px auto ; } </style> <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script> <script> $(function() { $('a[rel=gallery]').fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 500, 'speedOut' : 500 }); }); function foo() { $('.hot').html('<a rel="gallery" title="xxxxx" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" /></a>') } </script> </head> <body> <div class="hot"></div> <input name="" type="button" value="uu" onclick="foo()"> </body> </html> |
большая картинка открывается на весь экран как без галереи.
при выводе картинок через PHP работает. а вот через $('#xxxxx').html('<a rel="gallery" title="xxxxx" href="/xxxx/papk1/1.jpg"><img src="/xxxx/papka2/1.jpg" /></a>') не работает |
Цитата:
|
при выводе картинок через PHP работает
|
спасибо за код. чуть позже почитаю
|
Часовой пояс GMT +3, время: 10:52. |