Lightbox — всплывающие картинки в uCoz

В последнем обновлении uCoz произошло обновление встроенного эффекта Lightbox, который применяется для отображения увеличенных изображений и фотографий когда вы кликнете мышкой по миниатюре. Картинка в этом случае открывается не в отдельной вкладке или новом окне браузера, а поверх основного содержимого страницы — так называемая всплывающая картинка.

Итак в последнем обновлении этот эффект внедрили во все модули, точнее он был и раньше, но использовался по умолчанию только в фотоальбоме. Теперь прикрепляя картинки к материалам, если изображение больше чем указанные ограничения, то при клике по миниатюре изображения в готовом материале — полная картинка откроется с эффектом lightbox.

У меня это сработало при добавлении новых материалов, но вот на старых материалах картинки открывались по прежнему в новом окне. Но это легко лечится, и нам не придётся перезаливать картинки или перелопачивать сильно html код. Достаточно добавить в конструкторе сайтов в блок верхняя часть сайта следующий jQuery код:

<script type="text/javascript">  
  $(document).ready(function(){
  $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox');
  $('.ulightbox').fancybox({padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons : {}}});
  $(window).scroll(function() {
  if (($.browser.msie) && (document.compatMode == 'BackCompat')) {
  $.fancybox.reposition();
  }
  });
});
</script>  

Что делает этот jQuery код?

Он находит все ссылки на картики (т.е. href которых заканчивается расширением картинки) и меняет класс этого тэга a на ulightbox. Далее уже встроенный lightbox плагин jQuery от uCoz использует этот класс, чтобы отображать файл картинки из ссылки во всплывающем окне поверх основного содержимого страницы.

На самом деле в этом коде есть лишний кусок, который дублирует код встраиваемый самой CMS uCoz и его легко можно сократить до следующего jQuery кода:

<script type="text/javascript">  
  $(document).ready(function(){
  $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox');

});
</script>

Но у меня всё работало как в первом и во втором варианте, если у вас не сработает второй то можете попробовать первый. Преимущество данного метода в том, что скрипт добавит класс ко всем ссылкам ведущим на изображения, в т.ч. на других сайтах и сделает это автоматически.Далее небольшая видеозаметка на полторы минуты демонстрирующая как установить данный код на сайт.