использование fancybox rel = group для одного img и jQuery img src change

Question

использование fancybox rel = group для одного img и jQuery img src change

0

У меня есть очень конкретный вопрос, который звучит для fancybox. Моя разметка выглядит так:

<a id="fancy_link" class="fancybox" href="image.jpg" rel="group"> 
  <img id="image" src="image.jpg" style="height: 500px;">
</a>

это одно изображение, которое прекрасно работает до сих пор. Но поскольку у меня много изображений (200), я хочу сгруппировать и не хочу жестко кодировать каждый из них в разметке, я использую простую функцию jQuery:

function changeImg(e, f) {
  $('#fancy_link').attr('href', e[f].img);
  $("#image").attr('src', e[f].img);
}

e и f - ссылки изображений, которые сохраняются в объекте Array namend .img

Итак, теперь мой вопрос: если вы знаете, как я могу справиться с этим, этот fancybox создает элементы группы, даже если в разметке есть только один элемент <img> и он просматривает все изображения, когда я нажимаю кнопку prev и next, которые идут с FancyBox.

supersize 04 май 2014, в 14:10

Источник

0

Не могли бы вы добавить значения e[f] в комментарии после строки?
Martijn 04 май 2014, в 11:32
0

Почему бы просто не добавить класс и сделать что-то вроде $('.ImagesYouWant').attr('rel','group1').fancybox();
Martijn 04 май 2014, в 11:33
0

извините, но не могли бы вы опубликовать это как подробный ответ, чтобы я понял, как это сделать.
supersize 04 май 2014, в 11:34
0

Это был весь пост: P вы добавляете класс ко всем изображениям, которые вы (или другой селектор, например, $(#wrapper).find('img') )), добавляете к нему rel, а затем добавляете в него fancybox
Martijn 04 май 2014, в 11:36
0

о, я думаю, что объяснил себя немного плохо У меня есть только один <img> в моей разметке, и я хочу, чтобы fancybox имел prev и next на том же изображении, changeImg()
supersize 04 май 2014, в 11:39
0

Вы хотите стрелки только с 1 изображением? Это плохо для пользовательского опыта, это не здесь по причине!
Martijn 04 май 2014, в 11:40
0

Есть 200 изображений, но я хочу отобразить их все через 1 тег изображения. Когда я нажимаю prev и next, это должно изменить imagesrc.
supersize 04 май 2014, в 11:41

Показать ещё 5 комментариев

Теги:

javascript

jquery

fancybox-2

1 ответ

Ещё вопросы

Не могли бы вы добавить значения e[f] в комментарии после строки?
Почему бы просто не добавить класс и сделать что-то вроде $('.ImagesYouWant').attr('rel','group1').fancybox();
извините, но не могли бы вы опубликовать это как подробный ответ, чтобы я понял, как это сделать.
Это был весь пост: P вы добавляете класс ко всем изображениям, которые вы (или другой селектор, например, $(#wrapper).find('img') )), добавляете к нему rel, а затем добавляете в него fancybox
о, я думаю, что объяснил себя немного плохо У меня есть только один <img> в моей разметке, и я хочу, чтобы fancybox имел prev и next на том же изображении, changeImg()
Вы хотите стрелки только с 1 изображением? Это плохо для пользовательского опыта, это не здесь по причине!
Есть 200 изображений, но я хочу отобразить их все через 1 тег изображения. Когда я нажимаю prev и next, это должно изменить imagesrc.

Martijn · Answer 1 · 2014-05-04T08-51-00.000Z

После одного из ваших комментариев я понял, что вы имеете в виду. Это было бы странно, и было бы неожиданно, если бы вы не знали этот код и не изучали его. Я хочу, чтобы вы только хотели отобразить первый:

<div>
   <img src="1.jpg" alt="img1" rel="group1" />
   <img src="2.jpg" alt="img2" rel="group1" />
   <img src="3.jpg" alt="img3" rel="group1" />
   <img src="4.jpg" alt="img4" rel="group1" />
   <img src="5.jpg" alt="img5" rel="group1" />
</div>


div img{ display: none; }
div img:nth-child(1){ display: inline-block;}

Этот код имеет большее значение для других пользователей. Профессионал здесь состоит в том, что все изображения будут предварительно загружены. Кон таким образом, что все изображения будут предварительно загружены (я знаю, дважды). У вас есть большое количество изображений, которые могут вынуть патрон из полосы пропускания пользователя.

Если у вас есть все пути вверху изображений в массиве, вы можете сделать что-то вроде этого:

$.each(imageArr, function(key,image){
    $img = $( document.createElement('img') );
    $img[0].src = image.img; // img is the key in the object
    $('div').append($img);
})

Это немного сложнее и может усложнить некоторые обработки событий, но у вас есть больше контроля над загружаемыми изображениями. Вы можете изменить это на то, что загружает два за раз, а затем делает следующий

это не совсем то, что я намереваюсь сделать, но отчасти решает проблему. Я хотел избежать создания всех элементов изображения в теле, я хотел изменить только источник изображения одного <img> когда я нажимаю кнопки « prev или « next в fancybox, но я нажимаю, что это приведет к код fancybox, чтобы сделать это.
Если вы хотите пойти JS по этому вопросу, я предлагаю второй способ. Все еще нет необходимости в жестком кодировании, и намного лучше поддерживать
один вопрос, не могли бы вы откорректировать свой ответ, что each функция содержит элемент массива, в котором у меня есть все мои пути. Это var imageArr = [{ img: 'linktoimage' }, { img: 'linktoimage2'}, /* .. */];
Отредактировал это, просто прочитайте каждый jquery с массивами, это даст вам лучшее понимание