Фотогалерея JQuery lightbox

Поделиться1Вт, 7 Июн 2011 08:24:10

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 785
Уважение: +94
Позитив: +214
Последний визит:
Вт, 23 Апр 2024 00:32:08

Здравствуйте. На одном сайте я нашла код фотогалереи, которая мне очень понравилась. Я установила ее в таблицу на тестовике. Но она не работает должным образом. Здесь приведен полный код и пример. В примере при нажатии на фото оно эффектно открывается в полном размере, но не в отдельном окне или вкладке. А когда я нажимаю на фото в таблице у себя на тестовике, открывается отдельное окно без эффекта, короче просто открывается изображение. Адрес: http://artest.rusff.info/
В хтмл-верх я вставляла то, что в коде было между тегами <style></style>
В таблицу - саму галерею.

0

Поделиться2Вт, 7 Июн 2011 08:52:23

Автор: АЛЬБ
Cтарожил
Зарегистрирован: Ср, 31 Окт 2007
Сообщений: 3178
Уважение: +445
Позитив: +206
Пол: Мужской
Последний визит:
Вс, 4 Дек 2011 20:01:22

Laktonika здесь есть свой разработанный скрипт фотогалереи.. :rolleyes:
там их несколько видов! Lytebox на форуме (слайдшоу и фотогалерея)

0

Поделиться3Вт, 7 Июн 2011 08:59:01

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 785
Уважение: +94
Позитив: +214
Последний визит:
Вт, 23 Апр 2024 00:32:08

АЛЬБ
Я знаю... но мне надо именно ту галерею :rolleyes:

0

Поделиться4Вт, 7 Июн 2011 09:35:03

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

Laktonika Она есть в карусельном скрипте -в HTML верх ставим первые три файла

<link rel="stylesheet" href="http://hostjs-mybb2011.narod.ru/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/prototype.js"></script>
<script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/scriptaculous.js?load=effects,builder"></script>

вместо приведенных

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

0

Поделиться5Вт, 7 Июн 2011 09:37:17

Автор: Mistery Woman
Заслуженный
Зарегистрирован: Чт, 8 Апр 2010
Сообщений: 359
Уважение: +24
Позитив: +15
Последний визит:
Сб, 24 Июн 2023 12:14:08

А где сами файлы

jquery.js>
jquery.lightbox-0.5.js
jquery.lightbox-0.5.css" ????

Куда Вы их загружали?
Что то я никак не найду, где их там вообще можно скачать... А без них конечно ничего работать не будут

0

Поделиться6Вт, 7 Июн 2011 09:46:07

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 785
Уважение: +94
Позитив: +214
Последний визит:
Вт, 23 Апр 2024 00:32:08

Deff написал(а):

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Это я пробовала сначала, ставила везде, где только можно.

Deff написал(а):

<link rel="stylesheet" href="http://hostjs-mybb2011.narod.ru/css/lightbox.css" type="text/css" media="screen" /><script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/prototype.js"></script><script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/scriptaculous.js?load=effects,builder"></script>

Поставила, но теперь перестали работать кнопки (Новости, Администрация, Навигация и тд) в таблице.

0

Поделиться7Вт, 7 Июн 2011 09:49:14

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

Laktonika - знаю - дайте ссылку на страницу с табличкой с установленным кодом и где там картинки - чот не вижу

Отредактировано Deff (Вт, 7 Июн 2011 09:54:13)

0

Поделиться8Вт, 7 Июн 2011 09:54:23

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 785
Уважение: +94
Позитив: +214
Последний визит:
Вт, 23 Апр 2024 00:32:08

Deff
http://artest.rusff.info/

Deff написал(а):

<link rel="stylesheet" href="http://hostjs-mybb2011.narod.ru/css/lightbox.css" type="text/css" media="screen" /><script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/prototype.js"></script><script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/scriptaculous.js?load=effects,builder"></script>

После установки этого перестали работать кнопки, я писала ранее.
Так что картинки невозможно увидеть

Отредактировано Laktonika (Вт, 7 Июн 2011 09:55:13)

0

Поделиться9Вт, 7 Июн 2011 10:05:28

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Вчера 23:36:59

Laktonika
Переставьте скрипт из таблицы в начало HTML низ
Добавьте красным

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("td.#menuTxT div.submenutext").hide();

$("td.#menux div.submenutext:first").show();
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").hide();
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).fadeIn();
return false; });
});
</script>

Отредактировано Deff (Вт, 7 Июн 2011 10:06:17)

0

Поделиться10Вт, 7 Июн 2011 10:07:40

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 785
Уважение: +94
Позитив: +214
Последний визит:
Вт, 23 Апр 2024 00:32:08

Deff
Кнопки работают, картинки по-прежнему просто открываются, без эффекта.

0

Поделиться11Вт, 7 Июн 2011 12:09:33

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Laktonika
Чем Вас перестал устраивать код из этой темы? Сокращение JavaScript'a? Тот же самый лайтбокс - копируйте и вставляйте, со своими изображениями.

0

Поделиться12Вт, 7 Июн 2011 12:23:09

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 785
Уважение: +94
Позитив: +214
Последний визит:
Вт, 23 Апр 2024 00:32:08

rps
Я забыла про эту тему...
Но теперь другая проблема: я поставила все, как в той теме. Работает, но без стиля. Когда я ставлю в хтмл-верх код стиля:

<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-image: url(http://s54.radikal.ru/i144/1106/52/fd122d4fdcf3.png);
padding: 10px;
width: 420px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #808080;
border-width: 5px 5px 20px;
color: #808080;
}
#gallery ul a:hover { color: #808080; }
</style>

...стиль не меняется.

0

Поделиться13Вт, 7 Июн 2011 12:24:45

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Если что - вот рабочий вариант, из той же темы, только решил для сохранности перезалить файлы к себе: http://tps.0pk.ru.

Код:

<script src="http://j-14kcob.narod.ru/jquery.lightbox-0.5.js" type="text/javascript"></script>
<link href="http://j-14kcob.narod.ru/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>

Код:

<div id="gallery">
	<a href="http://www.03www.su/2010/090910-04/photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
	<img alt="" height="72" src="http://www.03www.su/2010/090910-04/photos/thumb_image1.jpg" width="72" /> </a>
	<a href="http://www.03www.su/2010/090910-04/photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
	<img alt="" height="72" src="http://www.03www.su/2010/090910-04/photos/thumb_image2.jpg" width="72" /> </a>
	<a href="http://www.03www.su/2010/090910-04/photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
	<img alt="" height="72" src="http://www.03www.su/2010/090910-04/photos/thumb_image3.jpg" width="72" /> </a>
	<a href="http://www.03www.su/2010/090910-04/photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
	<img alt="" height="72" src="http://www.03www.su/2010/090910-04/photos/thumb_image4.jpg" width="72" /> </a>
	<a href="http://www.03www.su/2010/090910-04/photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
	<img alt="" height="72" src="http://www.03www.su/2010/090910-04/photos/thumb_image5.jpg" width="72" /> </a>
</div>

+1

Поделиться14Вт, 7 Июн 2011 12:44:02

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 785
Уважение: +94
Позитив: +214
Последний визит:
Вт, 23 Апр 2024 00:32:08

Laktonika написал(а):

12 пост

0

Поделиться15Вт, 7 Июн 2011 13:59:03

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Laktonika
Во-первых, есть 13 сообщение.
Во-вторых: http://tps.0pk.ru.

0

Поделиться16Вт, 7 Июн 2011 14:11:42

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 785
Уважение: +94
Позитив: +214
Последний визит:
Вт, 23 Апр 2024 00:32:08

rps
Все равно не получается. Я уже запуталась..
Объясните, пожалуйста, еще раз от начала до конца - пошагово.
Наконец-то, все как надо.
Все стало ясно из исходного кода форума http://tps.0pk.ru/

Отредактировано Laktonika (Вт, 7 Июн 2011 14:14:26)

0

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Фотогалерея JQuery lightbox

Сообщений 1 страница 16 из 16

Поделиться1Вт, 7 Июн 2011 08:24:10

Поделиться2Вт, 7 Июн 2011 08:52:23

Поделиться3Вт, 7 Июн 2011 08:59:01

Поделиться4Вт, 7 Июн 2011 09:35:03

Поделиться5Вт, 7 Июн 2011 09:37:17

Поделиться6Вт, 7 Июн 2011 09:46:07

Поделиться7Вт, 7 Июн 2011 09:49:14

Поделиться8Вт, 7 Июн 2011 09:54:23

Поделиться9Вт, 7 Июн 2011 10:05:28

Поделиться10Вт, 7 Июн 2011 10:07:40

Поделиться11Вт, 7 Июн 2011 12:09:33

Поделиться12Вт, 7 Июн 2011 12:23:09

Поделиться13Вт, 7 Июн 2011 12:24:45

Поделиться14Вт, 7 Июн 2011 12:44:02

Поделиться15Вт, 7 Июн 2011 13:59:03

Поделиться16Вт, 7 Июн 2011 14:11:42