Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Сделать фотогалерею в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Добрый день, хочу сделать фотогалерею у себя на сайте, примерно как вот здесь http://cars.auto.ru/cars/used/sale/4845251.html Только расположение у меня немного другое. Скажите пожалуйста, мне ...


Закрытая тема
 
Опции темы
Старый 15.01.2010, 18:00   #1
Добрый день, хочу сделать фотогалерею у себя на сайте, примерно как вот здесь
http://cars.auto.ru/cars/used/sale/4845251.html
Только расположение у меня немного другое. Скажите пожалуйста, мне нужно иметь две версии одной картинки (большая и маленькая) ли можно обойтись одним файлом? Как это сделать?
 
Старый 15.01.2010, 18:00
Ссылки
Старый 15.01.2010, 20:09   #2
Надо иметь 2 картинки: большую и маленькую, но красивее использовать на мой взгляд jQuery FancyBox, да и места будет меньше занимать на странице
 
Старый 15.01.2010, 20:24   #3
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:14   #4
Цитата:
Сообщение от phpprogs Посмотреть сообщение
Надо иметь 2 картинки: большую и маленькую, но красивее использовать на мой взгляд jQuery FancyBox, да и места будет меньше занимать на странице
Вобщем скачал я данный FancyBox, расскажите пожалуйста мне нубу, как его на страничку перенести с помощью дримвивера.
 
Старый 16.01.2010, 17:17   #5
http://fancybox.net/howto
вставляйте в код страницы все что там написано, если надо правьте ссылки.
 
Старый 16.01.2010, 18:01   #6
Цитата:
Сообщение от 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 код:
<class="zoom1" title="Sample title" href="images/1_b.jpg"><img src="images/1_s.jpg" alt="" /></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.: пишу с головы, но должно все работать
 
Этот пользователь сказал спасибо phpprogs за это полезное сообщение:
sprinter (18.01.2010)
Старый 17.01.2010, 19:49   #7
Спасибо, завтра наделаю фоток и попробую.
 
Старый 22.01.2010, 13:18   #8
Попробовад сделать это, всё получилось, смотрится ваще классно, тока есть один косяк, когда я вставляю между тэгами <head> и </head> код fanctbox`a, то вся страничка съезжает вправо до угла монитора. Скажите пожалуйста, на что обратить внимание?

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

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

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

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

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

Последний раз редактировалось Niemans; 22.01.2010 в 14:02.. Причина: Добавлено сообщение
 
Старый 22.01.2010, 17:42   #10
Цитата:
Сообщение от Nimans Посмотреть сообщение
<a class="group" rel="group" title="title" href="image.jpg">Текст</a>
Спасибо, но не получилось, картинка просто открывается в новом окне.
 
Старый 22.01.2010, 17:42
Закрытая тема


Опции темы



Текущее время: 11:51. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум