Отобразить вручную определенную галерею из миниатюрного щелчка (fancybox)
Я использую тему для WordPress, в которую уже включен fancybox. Все работает отлично, гладко и чисто, как это должно быть. Теперь есть что-то, что я хотел бы сделать, и, к сожалению, у меня нет знаний для этого:
При нажатии на первый эскиз моего опубликованного сообщения появляется слайд-шоу fancybox и отображаются все миниатюры. Прохладный достаточно, но я хотел бы, чтобы это слайд-шоу отображалось больше, чем только эти миниатюры. Возможно, что-то вроде 10 или 20 файлов, размещенных локально.
Я считаю, что есть способ сделать это, я нашел этот фрагмент кода по другому вопросу ( Fancy box – как показать слайд-шоу из одного миниатюры ), но просто не мог заставить его работать, как бы я ни старался (я могу больше или Менее «читать» коды, но писать это еще не что-то, что я могу сделать!)
- Чтение переменной javascript в shiny / R при загрузке приложения
- Ионный бесконечный свиток
- Выполнить API диаграммы Google (Javascript) в php-файле
- Как я могу настроить целевые объявления / баннеры с помощью javascript?
- Как добавить javascript на сайт wordpress
Так что да, чтобы просто поместить вещи, я бы хотел, чтобы мой «post1» fancybox отображал изображения X, кроме миниатюр. А также, чтобы повторить этот трюк с X различными сообщениями, поэтому мне нужно найти чистый способ сделать это, а не просто какой-то трюк структуры. Я попытался включить указанный выше код в html-часть моего сообщения, но просто не работал.
Не стесняйтесь отвечать! И дайте мне знать, если вам нужна дополнительная информация!
Я считаю, что это интересная часть моего сообщения в формате HTML:
<div id="product-slider"> <div id="product-slides"> <div class="item-slide"> <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span> </a> </div> <!-- .item-slide --> <div class="item-slide"> <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/Angelique_thumb1.jpg" rel="gallery" class="fancybox"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_267x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span> </a> </div> <!-- .item-slide --> </div> <!-- #product-slides --> <div id="product-thumbs"> <a href="#" class="active" rel="1"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span> </a> <a href="#" class="last" rel="2"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span> </a> </div> <!-- #product-thumbs --> </div> <!-- #product-slider -->
- Ошибка JQuery: невозможно открыть TypeError: объект # <HTMLDocument> не имеет метода 'ready'
- Добавление / обновление пользовательских полей после выбора изображений в окне мультимедиа (Wordpress)
- Wordpress wp_enqueue_script не работает
- Как загрузить Javascript в Wordpress Plugin
- Кнопка возврата браузера, отображающая страницу из кеша?
- Неоднократно применяйте CSS к определенным словам
- Как я могу отключить ctrl + a с помощью javascript?
- JQuery не работает в wordpress
После прочтения нескольких вопросов, внешних ссылок и т. Д., Я понял, что это проблема, и как я считаю, что это работает: (Извините, если это звучит довольно просто, но я просто объясню это так, как хотелось бы читать Он! Язык новичка: ON)
Поскольку fancybox уже активирован моей темой WP, мне не нужно называть это в моем HTML-коде на моем посту. Когда я проверяю свой исходный код на своем сообщении (с 1 миниатюром и без добавления кода), я вижу, что этот код сгенерирован:
<div id="product-slider"> <div id="product-slides"> <div class="item-slide"> <a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox"> <img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span> </a> </div> <!-- .item-slide --> </div> <!-- #product-slides -->
Поэтому мое значение «rel» для слайд-шоу – «галерея». Теперь мне просто нужно добавить столько файлов, сколько пожелаю в своем посте для показа слайд-шоу, со следующим кодом:
<a class="fancybox" rel="gallery" href="image02.jpg"></a> <a class="fancybox" rel="gallery" href="image03.jpg"></a> <a class="fancybox" rel="gallery" href="image04.jpg"></a>
И все, я могу добавить столько фотографий, сколько пожелаю, хотя ни один из них не отображается в виде эскизов! Во всяком случае, благодаря Тони и Янису за их помощь, если этот ответ никому не поможет, по крайней мере, я рад, что это работает так, как я хотел!