Меню Закрыть

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

ucoz lightbox

В последнем обновлении 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>

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

Похожие записи

1 Comment

  1. vit

    Много раз пытался найти в инете информацию о том, как сделать заголовок в лайтбоксе. Если и встречается, то воспользоваться у меня не получается. Хочется, чтобы при наведении курсора на середину всплывающего окошка отражалось название фотографии из title. Ну или под картинкой появлялось название. Второй вариант немного хуже, потому что съедает пространство для фотографии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания Google.