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

Сервис обмена электронных валют

Партнерская программа Kredov

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

#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К   Количество загрузок: 410

  • 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

robot

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


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