Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
2 / 2 / 0
Регистрация: 23.09.2012
Сообщений: 98

подключение Fancybox к галерее

08.12.2013, 20:29. Показов 1330. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть ряд фотографий со скриптом, дающим эффект перехода от черно-белого изображения к цветному при наведении. Хочу прицепить к нему плавное увеличение при клике, остановился на Fancybox, и тут возникают препятствия в html, которые мне частично просто непонятны.
Вся суть перехода от черно-белого к цветному в наложении двух изображений одно на другое в маркированном списке. Вот код одного из них:

HTML5
1
2
3
<li> <a href="photos/01.jpg"><img src="photos/thumbs/01b.jpg" class="grey" /></a>
      <img src="photos/thumbs/01.jpg" class="color" />
    </li>
где в первой строчке черно-белое, во второй, соответственно, цветное. Также в первой строке можно задать ссылку на локальную папку или на сайте, что я и сделал. В этом случае при клике открывается большое изображение, но конечно безо всяких эффектов. И вот тут хтмл-код Fancybox вводит в ступор. Вот что он требует:

HTML5
1
2
<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
То есть, там где у меня прописаны классы "grey" и "color" нужно по идее указать класс "fancybox". Их же не напишешь оба сразу, так? Далее - в img src у меня уже указаны черно-белое и цветное изображения, как туда добавить то что от второго кода (т.е маленькое и большое фото) - непонятно. Пробовал самые разные варианты - ничего не работает. Вообще хотел бы также пояснения, зачем в Fancybox указаны и a href и img src одновременно, что это дает? Так, просто чтобы знать спрашиваю.
Ну и непонятно как совместить два этих хтмл-кода, чтобы эффект смены изображения остался и плавное увеличение по клику было.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
08.12.2013, 20:29
Ответы с готовыми решениями:

Подключение fancybox в модуле Joomla
Добрый день! Пытаюсь подключить fancybox в модуле, чтобы он грузился не на всех страницах сайта, а только в фотогалерее. Проблема...

присоединение к галерее
делаю галерею и использовал готовую ( gallery-3.0.2 ), но захотел туда еще добавить систему голосования а она состоит из картинок и вся она...

Сортировка в галерее
Добрый день, подскажите пожалуйста, как лучше всего сделать сортировку? То есть у меня есть галеряя с картинками, и мне нужна возможности...

2
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
08.12.2013, 21:24
Цитата Сообщение от Samsagriz Посмотреть сообщение
Их же не напишешь оба сразу, так?
да хоть десять пропиши, это через пробел делается, кавычки обязательны
HTML5
1
class="classOne classTwo"
Цитата Сообщение от Samsagriz Посмотреть сообщение
Ну и непонятно как совместить два этих хтмл-кода
да скорее ни как, такое нужно самому писать, а не женить два чужих кода
0
2 / 2 / 0
Регистрация: 23.09.2012
Сообщений: 98
09.12.2013, 05:15  [ТС]
newJS если бы мог сам написать то написал бы, но вопрос поставлен выше, как добавить плавное увеличение по клику.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
09.12.2013, 05:15
Помогаю со студенческими работами здесь

Не видно видео в галерее
Приложение создает папку в корневом каталоге и сохраняет в папку видео. Через стандартную галерею этих видео не видно. Только с помощью...

Задача о картинной галерее
Ребята, почти вся надежда на вас, 1 день до сдачи курсового проекта по C#. Дело в том, что сам на шарпе не очень, пытался учить по Шилдту...

ImageView открыть в Галерее
Есть ImageView. Нужно, чтобы при нажатии на него картинка в нём открывалась через Галерею

Удалить фон в галерее
Сейчас на денвере работаю с темой http://demo.wordpress-ru.ru/ И хотелось бы, чтобы темное окно, которое появляется на каждом...

В галерее пустая папка
При входе в галерею мне на телефоне пишут, что папка пустая, хотя фото в смартфоне есть. Если открываю Вайбер, то тогда могу выйти на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru