Перейти к содержимому



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

#1 Гость_k00_ten_00k_*
Гость_k00_ten_00k_*
  • Гости
0

Отправлено 03 Апрель 2009 - 12:27

Ребята помогите блондинке :) !!
Я новичек в этом деле! Нужно создать галерею на сайте!Очень!
Выглядеть должна так: вверху привьюшки с прокруткой, а под ними большая фота!!!
Облазила кучу сайтов, но такой найти не могу!!В языках я не сильна только html! Сайт делаю в Дриме!Знаю что есть в javascript шаблоны но как их вставить и отредактировать.....
Вообщел ламер я полный, если кто знает несложные (для блондинок))))))) способы создания галерей, помогите плиииз!Заранее СПСБ.

 

 

  • 0

#2 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 04 Апрель 2009 - 14:15

фотогалерея на JavaScript

Уже обсуждалось :)
Скачайте из аттача предложенную галерею.
Как её установить и ей пользоваться щас распишу:

Распакуйте архив, который вы скачали в отдельную папку.
Структура папок и файлов такова:

gallery/ - папка самой галереи, где будут располагаться файл альбомов и наши картинки
gallery/Madeira/ - наш альбом
gallery/Madeira/images/ - Большие картинки(просмотр)
gallery/Madeira/thumbnails/ - Малые картинки(предпросмотр)

Файлы в папках images и thumbnails должны быть с идентичным(одинаковым) названием

gallery/Madeira/gallery.xml - файл, который определяет, какие картинки будут показаны в данной галереи
--------------------------------------------------------------------------------------------------------------------------------
scripts/ - системные скрипты для работы с библиотекой(их не трогать)
--------------------------------------------------------------------------------------------------------------------------------
styles/ - папка оформления
styles/imago.css - файл каскадных таблиц(оформление страницы и блоков)
styles/img/ - папка картинок(пусто, предыдущая, следующая, загрузка)


И так смотрим в файл index.html

1) Нам нужно вставить системные файлы, поэтому между <head> и </head> вставляем
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/imago.js" type="text/javascript"></script>

2) Встречаем такой HTML код, это и есть создание альбома
<div id="imagogallery" class="imagogallery" >
	this.loader = new GalleryLoader('gallery.xml', 'gallery', "Madeira");
	this.prefetching = 'all';
	</div>

Нам существены только две строкчки, которые нужно понять и разобрать
this.loader = new GalleryLoader('gallery.xml', 'gallery', "Madeira");
this.prefetching = 'all';
Вторая строка нужна обязательно, для вывода альбома
Первая строка это генератор фотогалереи, как мы видим там есть 3 параметра:

1) Файл, который определяет, какие картинки будут показаны в данной галереи (в данном примере gallery.xml)
2) Папка относительно index.html, где хранятся альбомы (в данном примере gallery)
3) Папка альбома в папке gallery(так же будет и называться альбом) (в данном примере Madeira)


Так вот, чтобы теперь создать новый альбом, нам нужно создать в gallery/ подобие папки Madeira со своими картинками в папках images и thumbnails и своим XML-файлом. Всё мы создали альбом USA с файлом usa.xml
Теперь в HTML мы можем сгенерировать галлерею таким образом
<div id="imagogallery" class="imagogallery" >
	this.loader = new GalleryLoader('usa.xml', 'gallery', "USA");
	this.prefetching = 'all';
	</div>
Всё наша галерея работает :)

Как же нам теперь добавлять файлы в определённый альбом. Для этого и служит файл *.xml
Если открыть его в блокноте мы можем увидеть строку, определяющую XML файл, нам она не важна
<?xml version="1.0" encoding="UTF-8"?>

Так же мы видим тег simpleviewerGallery, его параметры настройки галереи(цвета текста, откуда считывать предпросмотр и сами картинки, размеры окна и так далее)

Внутри этого тега и располагается представление картинки
<image>
	<filename>[название_картинки_с_расширением]</filename>
	<caption>[заголовок_к_картинке]</caption>
</image>
Вставляя такие последовательности друг за другом мы формируем список показываемых картинок в данном альбоме

Удачно разобраться, будут вопросы пишите, на все отвечу :(

Прикрепленные файлы

  • Прикрепленный файл  imago_v07.zip   201,57К   Количество загрузок: 444

  • 0

#3 Милена
Милена
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 27 Май 2009 - 08:11

Здравствуйте! Подскажите, пожалуйста, а можно ли реализовать внизу галереи к каждой фото "Комментарии" и если можно, то как?
  • 0

#4 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 28 Май 2009 - 00:16

Просто так не получится. Там не мало придётся перелопатить, но сделать можно :)
  • 0

#5 Drev
Drev
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 28 Май 2009 - 13:21

Спасибо большое. Помогло.
Цвет и границы я в css файле поменял. Но возник вопрос как изменять размер окон и расстояние между ними, и как разместить превью под (над, справа) картинкой
  • 0

#6 m0tti
m0tti
  • Неактивные
  • 343 сообщений
  • Репутация: 0

Отправлено 25 Август 2009 - 21:14

А если отографий будет 1000 , как ява галерея работать будет?
  • 0

#7 strelog321
strelog321
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 10 Сентябрь 2009 - 09:40

Добрый День! Понравилась фотогаллерея. Все поставил но не могу найти настройку размера окон. Подскажите пожалуйста в каком файле и теге это находится. СПАСИБО!!!
  • 0

#8 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 12 Сентябрь 2009 - 23:01

m0tti, попробуй и узнаешь, не пробовал не знаю...
strelog321, про какой размер окон вы говорите, я понять не могу...
  • 0

#9 didou
didou
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 13 Ноябрь 2009 - 22:16

прошу прощения за тупой вопрос, но как такую галерею вставить на сайт на хостинге narod.ru
  • 0

#10 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 16 Ноябрь 2009 - 00:19

didou, всё легко и просто так же как и на любой другой. Ограничений на использование галереи нет, так что стоит просто почитать как вставлять Javascript на свой сайт
  • 0

#11 stereomike
stereomike
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 02 Февраль 2010 - 18:52

посмотрел,интересно,но хочется какую-нибудь шуструю галерею,которая сама будет сжимать картинки и масштабировать их,с удобной навигацией....
  • 0

#12 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 04 Февраль 2010 - 02:29

stereomike, это вам нужна не галерея на JS, тут без PHP не обойтись. (Конечно есть некоторые возможности, но они будут слишком долго грузиться да и файл не ужмется практически)
  • 0

#13 surfer
surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 04 Февраль 2010 - 10:33

ZiTosS прав, можно просто взять любую галерею на JS которая вам понравилась и ее запрограммировать или найти уже готовую
  • 0

#14 ghost
ghost
  • Неактивные
  • 2 сообщений
  • Репутация: 0

Отправлено 17 Февраль 2010 - 14:57

http://depositfiles....files/bhgmbn09a
попробуй от это ток это на флеше
  • 0

#15 surfer
surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 18 Февраль 2010 - 18:01

возможно это поможет http://www.gallery2.ru/

варианты скриптов, которые можно запрограммировать тут http://plugins.jquer...ins/category/52 и http://plugins.jquer...ins/category/48
  • 0

#16 ZiTosS
ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 18 Февраль 2010 - 20:00

Тема закрыта, ушли от разговора.
  • 0

#17 Frodo
Frodo
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 24 Февраль 2010 - 16:02

Помогите!!!
Установил галерею imago_v07.zip как говорил ZiTosS. На моем компе реботает на ура! Но когда заливаю на сервак и захожу через и-нет большие фотографии не подгружаются! Стандартные (те что были изначально по стандарту там) подгружаются, а мои не хотят! Могу скинуть всю галерею.
  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
MattCutts MattCutts 1-й за Сентябрь
Очков активности: 1 407 8 тем, 110 сообщений, 7 баллов репутации
Сайт: dmitrylee.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPM
    #1

    Андрей WPM (wpmaster.kz)
    Очков активности: 540 Вне конкурса за определение пользователя месяца

  • Фотография MattCutts
    #2

    MattCutts (dmitrylee.ru)
    Очков активности: 390 Вне конкурса за определение пользователя месяца

  • Фотография NataliaAntalia
    #3

    NataliaAntalia
    Очков активности: 210 0 тем, 35 сообщений, 4 балла репутации

  • Фотография ShowPrint
    #4

    ShowPrint (ShowPrint.ru)
    Очков активности: 162 1 тема, 15 сообщений, 6 баллов репутации

  • Фотография TimurR
    #5

    TimurR
    Очков активности: 94.5 3 темы, 12 сообщений, 3 балла репутации

  • Фотография Rexxar
    #6

    Rexxar
    Очков активности: 52.5 0 тем, 35 сообщений, 1 балл репутации

  • Фотография agrx
    #7

    agrx (key-assort.ru)
    Очков активности: 48 0 тем, 8 сообщений, 4 балла репутации

  • Фотография BLIK
    #8

    BLIK
    Очков активности: 42 0 тем, 7 сообщений, 4 балла репутации

  • Фотография Megoydagi
    #9

    Megoydagi (24ho.ru)
    Очков активности: 37.5 3 темы, 16 сообщений, 1 балл репутации

  • Фотография pozitron123
    #10

    pozitron123
    Очков активности: 33 1 тема, 8 сообщений, 2 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.09.2019
  • Яндекс выдача: 18.10.2019
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru