Автоматический lightbox для всех картинок на странице

Есть замечательная статья "Автоматический lightbox для всех картинок на странице", но буквально капли удобства использования данному решению не хватает.

И не хватает самую малость, если применить стиль для превью получившейся картинки, ну скажем задать для неё сдвиг влево (style="float: left;"), или сделать отступ (style="margin-left: 10px; margin-right: 10px;"), то все эти стили скрипт просто вырежет. Поэтому немного отредактируем его, а вернее одну строчку из этого скрипта. Смотрим скрипт lighbox_prepair.js с комментариями, строка №29. Заменим её на такую:

$('<a class="fancyLink" rel="gallery" href="'+domain_path+img_real_path+img_real_name+'.'+dot_arr[dot_arr.length-1]+'"><img src="'+imgs[i].src+'" style="'+imgs[i].style.cssText+'" alt="'+imgs[i].alt+'" title="'+imgs[i].title+'" /></a>').insertBefore(imgs[i]); // вставляем перед картинкой ссылку, с классом 'fancybox', на полноразмерную картинку и саму превью картинки

Что же здесь мы изменили?

А изменили мы здесь, вернее добавили вызов для превью картинки стиля, если таковой имеется, а также атрибутов alt и title, тоже в общем то бывает не лишним.

Ну и на последок для особо ленивых, кто хочет получить всё и сразу в одном месте приведу весь скрипт  lighbox_prepair.js с добавками, которые чуть выше были проделаны.

jQuery(document).ready(function()

{

	/*lightbox autothumb*/

	var i,j,z,key = '';

	var imgs=$('img'); //выбираем все картинки со страницы

	var flag=false; //флаг для обозначения нужно ли применять lightbox

	var imgs_count=$('img').length;

	if (imgs_count>0) {  //если на странице есть картинки то работаем

		for(i=0; i<imgs_count; i++){

			var arr=imgs[i].src.split('/'); //делим всю строчку src на части чтобы убрать лишнее

			for (key in arr) {

				if (arr[key] == 'autothumbs.php?img=') {  //если есть у src картинки есть autothumbs.php?img= значит мы на верном пути

					flag=true; //ставим флаг для включения lightbox

					var path_start=key; //позиция в массиве arr с которой начинается путь к картинке

					img_scr=arr[arr.length-1]; //берем имя картинки

					img_name_arr=img_scr.split('_'); //дели его на части чтобы убрать размер добавленный для autothumbs.php

					var img_real_name=''; //составляем имя

					for(j=0; j<img_name_arr.length-2; j++){

						img_real_name=img_real_name+img_name_arr[j];

						if(j<img_name_arr.length-3) img_real_name=img_real_name+'_';

					}


					var img_real_path='',domain_path='';

					var start=parseInt(path_start)+1;

					for(z=start;z<arr.length-1; z++) img_real_path=img_real_path+arr[z]+'/'; //составляем путь к картинке

					for(j=0;j<start-1; j++) domain_path=domain_path+arr[j]+'/'; //составляем имя домена

					dot_arr=img_scr.split('.'); //делим имя картинки на части чтобы вычленить расширение


					$('<a class="fancyLink" rel="gallery" href="'+domain_path+img_real_path+img_real_name+'.'+dot_arr[dot_arr.length-1]+'"><img src="'+imgs[i].src+'" style="'+imgs[i].style.cssText+'" alt="'+imgs[i].alt+'" title="'+imgs[i].title+'" /></a>').insertBefore(imgs[i]); // вставляем перед картинкой ссылку, с классом 'fancybox', на полноразмерную картинку и саму превью картинки

					$(imgs[i]).remove(); // удаляем оригинал превью картинки

				}

			}

		}

	}

	if (flag===true) { //если флаг поставлен, то применяем ко всем ссылкам с классом 'lightBox' скрипт lightbox

		$('a.lightBox').lightBox();

	}

});

04.06.2012

Вернуться на предыдущую страницу | Вернуться в раздел