Блог

У меня есть div с несколькими изображениями, которые открываются в лайтбоксе (prettyphoto). Используя один код jquery, я заставил эти изображения автоматически открываться в лайтбоксе, присвоив атрибут rel всем элементам div. С помощью css я выбрал ширину / высоту миниатюр.

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

Я имею в виду, что мне нужно было бы загружать изображения только через серверную часть, без необходимости загружать миниатюру, затем полноразмерное изображение и, наконец, добавлять ссылку.

Вот html:

 <div id="tab2" class="tab_content" style="text-align:center">
           <img src="images/img1_thumb.jpg" alt="image1"/>
        </div>
  

jquery — запрос:

 $(document).ready(function(){

            $('div.tab_content a').attr('rel', 'prettybox[grandsuite]')

            $("div.tab_content a").prettyPhoto({animation_speed:'normal',theme:'facebook',slideshow:false, autoplay_slideshow: false, social_tools:false, show_title:false, overlay_gallery:false});

        });
  

Спасибо!

Хорошо, значит, тебе нужно:

• получите каждый элемент из Dom
• извлекает его атрибут «href»
• заменить «_thumb.jpg » с помощью «.jpg»
• и, наконец, создайте окружающий элемент с параметром «href», установленным в исходное местоположение изображения

Давайте сделаем это:

 // Wrap all <img> with an <a> tag and set the link target to the image's src
$("div.tab_content img").wrap(function(){
    return '<a href="'   $(this).attr('src').replace('_thumb.jpg', '.jpg')   '"/>';
});