создание фотогалереи

@daxo · Регистрация: 11.09.2013

Студворк — интернет-сервис помощи студентам

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

@fol · 24.02.2014, 22:38

фотогалереи делаются с помощью javascript и jquery. в интернете много библиотек jquery, которые просто подключаются и дают разные интересные эффекты

@zme9 · 24.02.2014, 22:40

fol, с css3 тоже можно сделать галерею )

@fol · 24.02.2014, 22:42

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

с css3 тоже можно сделать галерею )

css3 не кроссбраузерно

@daxo · 25.02.2014, 15:39 **[ТС]**

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

@dolte · 25.02.2014, 16:11

Используйте fancybox http://fancyapps.com/fancybox/

@daxo · 25.02.2014, 16:31 **[ТС]**

в результате поиска вышло вот так.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">// увеличение картинки
  $(function(){
    $('.zoom2').hover(function(){
      $(this).children('img').stop(true,true)
           .animate({width:"900px",height:"700px",left:"-300px",top:"-30px"}, 800);
    },
           function(){
     $(this).children('img').stop(true,true)
   .animate({left:"0",top:"0",width:"300px",height:"300px"}, 800);
  });
  });
  </script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
      <title>   на jQuery </title>
      <style>
div.zoom2 { width:300px; height:300px; position:relative; margin:0; left:0; right:0; }
div.zoom2 img { position:relative; cursor:pointer; left:0; top:0; width:300px; height:300px; }
div.zoom2:hover { overflow:visible; visibility:hidden; }
div.zoom2:hover img { visibility:visible; position:absolute; z-index:150; left:0; right:0; }
</style>
</head>
<body>
<br />
   <div align="center">
       
       <div class="zoom2">
   <img src="2.jpg" border="1" height="300" width="300" />

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@daxo 0 / 0 / 0 Регистрация: 11.09.2013 Сообщений: 29

	создание фотогалереи 24.02.2014, 21:40. Показов 3298. Ответов 6 Метки нет (Все метки) и снова сайт, и вот вопрос, есть изображения на сайте, хотелось бы при нажатии на них чтоб они плавно увеличились до своего размера и была возможность пролистать все последующие фото,как вот это красиво прописать и куда впихнуть, ибо до этого были попытки сделать фотогалерею так раздраконило всю страницу.. 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	24.02.2014, 22:38
	фотогалереи делаются с помощью javascript и jquery. в интернете много библиотек jquery, которые просто подключаются и дают разные интересные эффекты 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	24.02.2014, 22:40
	fol, с css3 тоже можно сделать галерею ) 0

@daxo 0 / 0 / 0 Регистрация: 11.09.2013 Сообщений: 29
	25.02.2014, 15:39 [ТС]
	не знаю, сколько не просмотрев сайтов о фотогалереи и сколько попыток не было ничего не вышло, либо выходит картинка стандартного размера, либо просто показывает что ее нет, а иногда бывает что вроде как в dreamwever при просмотре нет фото ,в то время как в коде есть, а при открытии в браузере они вообще в непонятном месте вылазят.. 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	25.02.2014, 16:11
	Используйте fancybox http://fancyapps.com/fancybox/ 0