Category: Выполненные работы


Кто сказал что нельзя впихнуть невпихуемое?

Есть два замечателльных плагина для jQuery – thickbox и cloud-zoom. Чертовски хороши по раздельности и просты в эксплуатации.

Thickbox – классика! Щелкаем фотку – выползает она же во весь экран, чего ж еще хотеть? Если оригинальная фотка крупнее экрана юзера или у картинки много мелких элементов – непременно захочется ее увеличить.

Для увеличения картинок хорошо подходит cloud-zoom. Но вот беда – cloud-zoom вешается на «чистую картинку», а ThickBox оборачивает ее DIVом.

Делаем так:

На 130 строке файла thickbox.js добавляем:

if(tbtozoom){

$(«#TB_Image»).mouseover(function(){

$(this).parent().attr(«href»,$(this).attr(«src»));

$(this).parent().attr(«rel»,»position: ‘inside’ , showTitle: false»);

$(this).parent().addClass(«cloud-zoom»);

$(‘.cloud-zoom, .cloud-zoom-gallery’).CloudZoom({position : «inside»,softFocus: true, smoothMove:2});

});

}

и, соответственно, объявляем переменную tbtozoom там где хотим получить эффект линзы.

Результат: волки сыты, овцы целы (задачка решена, исходный код cloud-zoom`a совсем не пострадал, код thickbox`a пострадал минимально, блочно). В планах перевести навешивание процедуры через callback-функции thickbox`a.

P.S. Примеры можно посмотреть на некоторых сайтах издательства.

Очередное обновление сайта компании.


Надежный хостинг от Firstvds