открыть Colorbox из текстовой ссылки - PullRequest
Новая
       17

открыть Colorbox из текстовой ссылки

0 голосов
/ 28 июня 2010

[РЕДАКТИРОВАНИЕ ВОПРОСА]

Я использую всплывающую подсказку для предварительного просмотра изображения, которая использует атрибут rel, поэтому для colorbox я использую class = "slideshow", чтобы сгруппировать изображения вместе.У меня это работает нормально, но я хотел бы иметь возможность открывать слайд-шоу из текстовой ссылки, показанной ниже.

(rel = "medium.jpg" - изображение, используемое для предварительного просмотра изображения) 

<div id='gallery'>
      <a  href='large.jpg' class="slideshow" rel='medium.jpg'><img src='small.jpg'/></a>
      <a  href='large2.jpg' class="slideshow" rel='medium2.jpg'><img src='small.2jpg'/></a>
    </div>

<!--text link-->
<a href="#" class="openSlideshow">open slideshow</a>

Ниже приведен стандартный код для запуска палитры, как я могу изменить его, чтобы открыть слайд-шоу? 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){
                $("a.openSlideshow").colorbox({slideshow:true});
            });
</script>

Заранее спасибо.

Ответы [ 3 ]

2 голосов
/ 28 июня 2010

Я посмотрел на страницу colorbox, и здесь все объясняется.

Посмотрите на это, это именно то, что вы пытаетесь сделать: пример 1

1 голос
/ 28 июня 2010

Хм, когда я попробую предложение Кая, оно не работает

Используя страницу примера: 

$(document).ready(function(){
  //Examples of how to assign the ColorBox event to elements
  $("a.example4").colorbox({ slideshow: true });


    <h2>Slideshow</h2>
    <p><a href="../content/ohoopee1.jpg" class="example4"  title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
    <p><a href="../content/ohoopee2.jpg" class="example4"  title="On the Ohoopee as a child">Grouped Photo 2</a></p>
    <p><a href="../content/ohoopee3.jpg" class="example4"  title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
0 голосов
/ 28 июня 2010

Просто расширьте его после динамического создания галереи. 

$(document).ready(function() {
            //dynamacially create the gallery here

            $("a.slideshow").colorbox({ slideshow: true });
        })
...