Нужна помощь с Lightbox

6 Posts

p0ws3r Reply #1, 14 years, 5 months ago

Добрый день, ребят помогите нужно настроить lightbox для картинок вот здесь http://www.arabellatravel.ru/534.html
Ни как не получается.

21 Posts

asokma Reply #2, 14 years, 5 months ago

не таргет а rel rel="lightbox"
причем возможно из за того что много яваскрипта библиотеки могут перекрывать друг друга

21 Posts

asokma Reply #3, 14 years, 5 months ago

не таргет а rel rel="lightbox"
причем возможно из за того что много яваскрипта библиотеки могут перекрывать друг друга

6 Posts

p0ws3r Reply #4, 14 years, 5 months ago

Вот исходный код
<div style="float: right"><a href="/assets/images/maldivy2.jpg " target="lightbox"><img style="border:1px solid #6B7E0A" src="/assets/images/maldivy2.jpg " border="0" alt="" hspace="5" vspace="5" width="115" /></a><br
куда здесь вставить rel?

21 Posts

asokma Reply #5, 14 years, 5 months ago

<a href="/assets/images/maldivy2.jpg" rel="lightbox"><img src="/assets/images//maldivy2.jpg" /></a>

А почему фотка исользуется для просмотра и лайтбокса одна и таже? не бережете вы своих пользователей. если фотографии будут большими и их будет много, то долго страница будет грузится. рекомендую использовать две фотографии. одна для предпросмотра (маленькая) а вторая для лайтбокса (большая).

тогда код будет таким:

<a href="/assets/images/big_photo.jpg" rel="lightbox"><img src="/assets/images/small_photo.jpg" /></a>

6 Posts

p0ws3r Reply #6, 14 years, 5 months ago

Пытаюсь сделать как вы говорите, при сохранении код получается вот таким

<div style="float: right"><a rel="lightbox" href="/assets/images/vetnam2.jpg"><img style="border:1px solid #6B7E0A" src="/assets/images/vetnam2.jpg" border="0" alt="" hspace="5" vspace="5" width="115"

Пример здесь http://www.arabellatravel.ru/528.html

Огромное спасибо, за попытку помочь мне. [ed. note: p0ws3r last edited this post 14 years, 5 months ago.]

21 Posts

asokma Reply #7, 14 years, 5 months ago

У вас закоментирован вызов лайтбокса

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

естественно не будет работать.
плюс ко всему у вас на сайте еще используется JQuery который перекрывает лайтбокс. если поправить то все нормально будет

21 Posts

asokma Reply #8, 14 years, 5 months ago

у вас возникает конфликт библиотек. чтобы все заработало в этом коде:


$(document).ready(function(){
     $("a:has(.highslid)").addClass("highslide");
    //$(".highslide").wrap("<table border='1' style='border-color:#888888; border-right-style: solid;margin:7px; padding:10px;'><tr><td></td></tr></table>");
$(".highslide").live("click", function(){
      return hs.expand(this);

   });

  });

необходимо все значки $ заменить на jQuery
и раскоментировать вызов лайтбокса о котором был пост выше) удачи.

6 Posts

p0ws3r Reply #9, 14 years, 5 months ago

Где и каким образом это редактировать?

21 Posts

asokma Reply #10, 14 years, 5 months ago

В HTML коде. где именно это у вас написано я не знаю. скорее всего в шаблоне или в чанке (по крайней мере я бы так сделал) Вам надо снять комментарии с Лайтбокса и еще везде где на странице используется JQuery надо $ заменить на jQuery