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

Реферальная программа Мегаплана

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

Lightbox2 (помогите)

#1 imflint

imflint
  • Пользователь
  • 16 сообщений
  • Репутация: 0
0

Отправлено 08 Июль 2009 - 15:51

Доброго времени суток !
Помогите решить проблему,
я установил Lightbox2, все устраивает кроме одного,
не могу привязать окно Lightbox(а) к верхней части экрана..
Подскажите пожалуйста как это сделать ?
или как-то привязать к центру, чтоб при прокрутке страницы ( вверх - вниз) окно "Lightbox" оставалось строго по центру экрана.

вот СSS Lightbox2.

#lightbox{ position: absolute; left: 0; width: 100%; height: 10; z-index: 100; text-align: inherit; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:images/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 55% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 55% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

 

 

  • 0

#2 imflint

imflint
    Topic Starter
  • Пользователь
  • 16 сообщений
  • Репутация: 0

Отправлено 08 Июль 2009 - 17:16

решение проблемы найдено.

в файле lightbox.css
absolute меняем на fixed

в lightbox.js

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
10 меняем на 1000.

и вуаля ! ))
  • 0

#3 9MASTER9

9MASTER9
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 17 Июль 2009 - 22:03

Приветствую!

Помогите, пожалуйста, решить задачу.
Необходимо сделать многостраничную галерею на lightbox.js
Я не программер, поэтому описала структуру галереи, проблемы и задачи своими словами, как смогла. Надеюсь, вышло понятно. Смотрите аттач.
Итак. Есть сайт на HTML и скрипт Lightbox v2.04
Никаких изменений в файлах скрипта не делалось, кроме одной строки в lightbox.js
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
10 изменила на 1000.
(В дальнейшем еще буду экспериментировать с этой строкой)
Плюс для превью был создан файл стилей.
Ссылки на фото выглядят так:
<table cellpadding="0" cellspacing="0" class="imageContainertable" id="table3">
<tr>
	<td valign="top" width="149">
	<div id="projects">
	<a title="Свадьба описание" rel="lightbox[wedding-001]" href="weddings/wedding-001/slides/001.jpg">
	<img src="weddings/wedding-001/thumbs/001.jpg" title="Титл изображения" alt="Альт изображения" width="114" height="101"></a><br>
	<td valign="top" width="149">
	<div id="projects">
	<a title="Свадьба описание" rel="lightbox[wedding-001]" href="weddings/wedding-001/slides/002.jpg">
	<img src="weddings/wedding-001/thumbs/002.jpg" title="Титл изображения" alt="Альт изображения" width="114" height="101"></a><br>
	<td valign="top" width="149">
	<div id="projects">
	<a title="Свадьба описание" rel="lightbox[wedding-001]" href="weddings/wedding-001/slides/003.jpg">
	<img src="weddings/wedding-001/thumbs/003.jpg" title="Титл изображения" alt="Альт изображения" width="114" height="101"></a><br>
	<br></div></td>
</tr>

И т.д. до картинки №15

</table>

Переход по стр. галереи:
<a href="http://smv.od.ua/gallerys/wedding-001_str-001.html">
<font color="#08629F" size="2">1</font></a>
<a href="http://smv.od.ua/gallerys/wedding-001_str-002.html" style="text-decoration: none">
<font color="#08629F" size="2">2</font></a>

Проблемы.
Есть две страницы галереи (будет и больше). На каждой размещено по 15 превью. Все фото лежат в одной папке, в ней находится папка с большими фото и папка с превью (имя_папки/slides и имя_папки/thumbs). При просмотре фото №15 на нем отсутствует кнопка NEXT, а при просмотре фото №16, отсутствует кнопка PREV. Невозможно осуществить переход с фото №15 на фото №16, то есть, просмотр всех фото, находящихся в папке, невозможен, так как ссылки на них расположены на разных страницах, с 1 по 15 на стр. №1, с 16 по 30 на стр. №2

Задача.
На фото №15 и 16, должны появиться кнопки NEXT и PREV, чтобы просматривать все фото в папке.
При выходе из просмотра на страницу с превью, необходимо, чтобы пользователь оказывался на той стр., на которой находится просматриваемое фото. То есть, если просматривалось фото №15, превью которого находится на стр №1, а затем №16, превью которого находится на стр. №2, пользователь должен попасть на стр. №2

Вопрос.
Если есть специалисты, которые разбираются в этом скрипте, подскажите, где и что нужно прописать? Может быть в стилях скрипта, или в самом файле lightbox.js, а может на HTML странице в ссылках на фото, или еще где-то.
Буду благодарна за любой совет или идею! Как я не измывалась над Гуглей, какие запросы не давала, информацию так и не нашла. Такое впечатление, что в интернете просто отсутствуют многостраничные галереи на lightbox
Осталась надежда только на форум.

struktura_voprosi_1.jpg
  • 0

#4 9MASTER9

9MASTER9
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 19 Июль 2009 - 07:38

Люди! Помогите, пожалуйста, со скриптом! Ну, неужели ни кто не знает, как решить эту задачу!

Может тему отдельную создать, даже не знаю… Решила запостить свой вопрос сюда, но тема имеет другое описание. Что скажет администратор?
  • 0

#5 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 20 Июль 2009 - 21:56

9MASTER9, уважаемый, данный велосипе6д никто не сделает вам. На форуме уже была отличная галерея, вот в неё и можете встроить LightBox. Она уже постраничная.
Кнопки NEXT и PREV будут работать только в приделах одной страницы, которая у вас загружена. Можно конечно написать велосипед, что при достижении последней на странице каритнки(рассчитываемой из скрипта), на кнопку NEXT ставить ссылку на следующую страницу. Но это ещё тот геморой, не советую связываться. Поищите в разделе HTML и JavaScript Там была отличная галерея с навигацией.
  • 0

#6 9MASTER9

9MASTER9
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 21 Июль 2009 - 04:01

Ну, на форуме я просила только совет, а если бы кто-то взялся довести до ума уже сделанный мной вариант галереи, то уж конечно не «ЗА ТАК»! Само собой, заплатила бы человеку за решение данной задачи.

Поищите в разделе HTML и JavaScript Там была отличная галерея с навигацией.

Спасибо за совет. Галерею сейчас поищу, надеюсь, вариант подойдет.
  • 0

#7 9MASTER9

9MASTER9
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 22 Июль 2009 - 18:03

По запросу Галерея на форуме нашлось две страницы. Просмотрела все темы, но, к сожалению, не нашла ту, где бы обсуждалась «отличная галерея с навигацией». Если не трудно, дайте, пожалуйста, ссылку на тему. Уже замучалась искать решение моей задачи.
  • 0

#8 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 22 Июль 2009 - 22:07

9MASTER9, http://imago.codeboj.../samplegallery/
А вот ссылка на тему Фотогалерея с постраничной навигацией
  • 0

#9 9MASTER9

9MASTER9
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 24 Июль 2009 - 02:11

К сожалению, мне она не подходит. Вот ссылка на мою галерею http://smv.od.ua/gal...01_str-001.html
Именно такого вида нужна, и вот к ней необходимо пристроить многостраничность.
Пока на других форумах тоже ничего путного не посоветовали. Видимо придется обратиться к фрилансерам.
  • 0

#10 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 31 Июль 2009 - 01:07

9MASTER9, Всё написать можно, но если четно, то моё мнение, если есть готовое и удобное, то бери пользуйся и переделывай, хочешь что-то своё научись или хотябы попробуй сам и тебе помогут. В вашем случае я вам написал как можно поступить, а писать скрипт это уже ваша задача
  • 0

robot

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


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