Форум

xxxxxxxxxx · #1 (**permalink**) 01.06.2016, 01:32

Ребята, ну скажите, правильно ли я добавляю картинки

$('#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(){ не помог

рони · #2 (**permalink**) 01.06.2016, 17:13

xxxxxxxxxx,
в чём проблема?

рони · #3 (**permalink**) 01.06.2016, 17:14

xxxxxxxxxx,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

xxxxxxxxxx · #4 (**permalink**) 01.06.2016, 19:43

Проблема в том что, при таком добавлении картинок, fancybox не увеличивает их

рони · #5 (**permalink**) 01.06.2016, 19:48

xxxxxxxxxx,
так может ссылки на большую картинку нет?

рони · #6 (**permalink**) 01.06.2016, 19:53

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>

xxxxxxxxxx · #7 (**permalink**) 01.06.2016, 19:59

большая картинка открывается на весь экран как без галереи.
при выводе картинок через PHP работает. а вот через

$('#xxxxx').html('<a rel="gallery" title="xxxxx" href="/xxxx/papk1/1.jpg"><img src="/xxxx/papka2/1.jpg" /></a>')

не работает

рони · #8 (**permalink**) 01.06.2016, 20:02

Сообщение от xxxxxxxxxx

большая картинка открывается на весь экран как без галереи.

значит fancybox не подключен, можно только гадать

xxxxxxxxxx · #9 (**permalink**) 01.06.2016, 20:04

при выводе картинок через PHP работает

xxxxxxxxxx · #10 (**permalink**) 01.06.2016, 20:05

спасибо за код. чуть позже почитаю

Форум

Справочник

Discord чат

Курсы javascript