Сделать фотогалерею

sprinter · 15.01.2010, 18:00

Добрый день, хочу сделать фотогалерею у себя на сайте, примерно как вот здесь
http://cars.auto.ru/cars/used/sale/4845251.html
Только расположение у меня немного другое. Скажите пожалуйста, мне нужно иметь две версии одной картинки (большая и маленькая) ли можно обойтись одним файлом? Как это сделать?

phpprogs · 15.01.2010, 20:09

Надо иметь 2 картинки: большую и маленькую, но красивее использовать на мой взгляд jQuery FancyBox, да и места будет меньше занимать на странице

Niemans · 15.01.2010, 20:24

http://www.twospy.com/galleriffic/example-4.html#5
http://www.twospy.com/galleriffic/index.html
или
http://www.agilegallery.com/ajax-demo.html
http://www.agilegallery.com/ajax-photo-gallery.html

sprinter · 16.01.2010, 17:14

Цитата:

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

Надо иметь 2 картинки: большую и маленькую, но красивее использовать на мой взгляд jQuery FancyBox, да и места будет меньше занимать на странице

Вобщем скачал я данный FancyBox, расскажите пожалуйста мне нубу

, как его на страничку перенести с помощью дримвивера.

Niemans · 16.01.2010, 17:17

http://fancybox.net/howto
вставляйте в код страницы все что там написано, если надо правьте ссылки.

phpprogs · 16.01.2010, 18:01

Цитата:

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

Вобщем скачал я данный FancyBox, расскажите пожалуйста мне нубу

, как его на страничку перенести с помощью дримвивера.

в между <head> и </head> надо вставить:

PHP код:


			
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.fancybox-1.2.6.pack.js"></script>

при условии что библиотека jquery (jquery.js) и библиотека fancybox (jquery.fancybox-1.2.6.pack.js) лежат в том же каталоге, что и HTML.

Потом в том месте где надо вывести галерею (между <body> и </body>) вставляете

PHP код:


			
<a class="zoom1" title="Sample title" href="images/1_b.jpg"><img src="images/1_s.jpg" alt="" /></a>

<a class="zoom2" href="images/2_b.jpg"><img src="images/2_s.jpg" alt="Another title" /></a>

    <script type="text/javascript">

        $(document).ready(function() {

            $("a.zoom1").fancybox({

                'overlayOpacity'    :    0.7,

                'overlayColor'        :    '#FFF'

            });



            $("a.zoom2").fancybox({

                'zoomSpeedIn'        :    500,

                'zoomSpeedOut'        :    500

            });

        });

    </script>

где 1_b.jpg - это большая картинка, 1_s.jpg - маленькая картинка

P.S.: пишу с головы, но должно все работать

sprinter · 17.01.2010, 19:49

Спасибо, завтра наделаю фоток и попробую.

sprinter · 22.01.2010, 13:18

Попробовад сделать это, всё получилось, смотрится ваще классно, тока есть один косяк, когда я вставляю между тэгами <head> и </head> код fanctbox`a, то вся страничка съезжает вправо до угла монитора. Скажите пожалуйста, на что обратить внимание?

Добавлено через 12 часов 15 минут

Всё, уже ненадо, разобрался

Добавлено через 1 час 2 минуты

Скажите, а можно ли сделать текстовую ссылку на картинку, чтобы эффект был как в fancybox?

Niemans · 22.01.2010, 14:01

<a class="group" rel="group" title="title" href="image.jpg">Текст</a>

sprinter · 22.01.2010, 17:42

Цитата:

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

<a class="group" rel="group" title="title" href="image.jpg">Текст</a>

Спасибо, но не получилось, картинка просто открывается в новом окне.

15.01.2010, 18:00	#1
sprinter	Добрый день, хочу сделать фотогалерею у себя на сайте, примерно как вот здесь http://cars.auto.ru/cars/used/sale/4845251.html Только расположение у меня немного другое. Скажите пожалуйста, мне нужно иметь две версии одной картинки (большая и маленькая) ли можно обойтись одним файлом? Как это сделать?

15.01.2010, 20:09	#2
phpprogs	Надо иметь 2 картинки: большую и маленькую, но красивее использовать на мой взгляд jQuery FancyBox, да и места будет меньше занимать на странице

15.01.2010, 20:24	#3
Niemans	http://www.twospy.com/galleriffic/example-4.html#5 http://www.twospy.com/galleriffic/index.html или http://www.agilegallery.com/ajax-demo.html http://www.agilegallery.com/ajax-photo-gallery.html

16.01.2010, 17:17	#5
Niemans	http://fancybox.net/howto вставляйте в код страницы все что там написано, если надо правьте ссылки.

17.01.2010, 19:49	#7
sprinter	Спасибо, завтра наделаю фоток и попробую.

22.01.2010, 13:18	#8
sprinter	Попробовад сделать это, всё получилось, смотрится ваще классно, тока есть один косяк, когда я вставляю между тэгами <head> и </head> код fanctbox`a, то вся страничка съезжает вправо до угла монитора. Скажите пожалуйста, на что обратить внимание? Добавлено через 12 часов 15 минут Всё, уже ненадо, разобрался Добавлено через 1 час 2 минуты Скажите, а можно ли сделать текстовую ссылку на картинку, чтобы эффект был как в fancybox? Последний раз редактировалось sprinter; 22.01.2010 в 13:18.. Причина: Добавлено сообщение

22.01.2010, 14:01	#9
Niemans	<a class="group" rel="group" title="title" href="image.jpg">Текст</a> Последний раз редактировалось Niemans; 22.01.2010 в 14:02.. Причина: Добавлено сообщение