Увеличение картинки при нажатии

Увеличение картинки при нажатии

21.07.201545076

Скрипт позволяет организовать при клике курсора мыши на миниатюру отрытие картинки в оригинальном размере в стиле ulightbox. Только одно изображение нужно для работы метода. Нет нужны в том что бы делать две разные картинки для миниатюры и для увеличеного варианта. Код избавляет вас от рутинной работы по коду когда вы оформляете материал.

Если говорить кратко то скрипт берет картинку и добавляет ей ссылку с класcом ulightbox. И все это мы сделаем конечно же с помощью JavaScript.

Установка

Заходим в Панель управления » Управление дизайном » Нижняя часть сайта и вставляем следующий код

Код
<script type="text/javascript">
  $(".eMessage img").each(function(){  
  if($(this).attr("src").length>0){  
  var title=typeof this.title!="undefined"?(' title="'+this.title+'"'):(typeof this.alt!="undefined"?(' title="'+this.alt+'"'):"");  
  $(this).wrap('<a href="'+this.src+'" class="ulightbox" target="_blank"'+title+'></a>');  
  };  
  });
</script>

Теперь в любом месте где будет блок с класcом eMessage и внутри будет находиться картинка то при ее нажатии она будет появляться в реальному размере в стиле ulightbox.

На этом все.




Сохраните в социальную сеть
Комментарии (6)
Deniss Lvov 21.07.2015 в 18:00Спам
И старый не чем не хуже
0
Юрий Герук 21.07.2015 в 18:19Спам
добавить в скрипт дополнительную строчку:
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').attr("data-fancybox-group", "ulightboxgroup");

И имеем дополнительное удобство, в блоге либо в новостях либо других модулях, листать фото с помощью стрелочек как в модуле фотоальбом.
1
Deniss Lvov 21.07.2015 в 20:51Спам
Вот уже теплее )))
0
Оно то хорошо. Но если такое сделать, то когда листаешь, то показывается миниатюрная картинка, а потом в большом размере. Как то это не очень.
1
Спасибо, забрал :)
0
Вячеслав 28.10.2016 в 02:21Спам
Здравствуйте. Отличный скрипт и отлично везде пашет, кроме того места где надо. Может конечно я не туда его громоздю. Но в самих статьях (не в новостях, на главной-он тоже летает ), чёт не запускается. В общем необходимо, что бы работал в самих статьях. Куда его для этого воткнуть нужно. В Панель управления » Управление дизайном » Каталог статей»страница материала и комментария к нему иже пихал - не помогает. Вывод.: Или я рукожоп, или фишка там какая-то есть. Может в какую строку его определеную вставить или еще что-то? Обьясните пожалуйста. Думаю не одному мне интересен этот вопрос. Помогите если не трудно, уж больно как работает понравилось.
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт