Главная » 2012 » Июнь » 28

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

Тэги: Lightbox, дизайн, видеоуроки, UCOZ Категория: uCoz
28.06.2012
Комментариев: 23| Просмотров: 12026
uCoz: Lightbox - всплывающие картинки | showmehow.ru


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

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

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

<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 кода:
Code

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

});
</script>

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


Посмотреть видеоурок (откроется в новом окне)


Предлагаю вам так же ознакомится: с моим бесплатным видео-курсом по uCoz


Оцените статью Комментариев: 23

Комментарии к статье Lightbox - всплывающие картинки

Всего комментариев: 23
avatar
22 Gega • 04:08, 28.12.2015
Спасибо за скрипт, всё работает!!!
avatar
21 DimDim • 21:49, 21.07.2015
А как сделать так, чтобы всплывающую картинку отправить на печать?
avatar
0
23 dkplayer • 13:36, 06.05.2016
Не совсем понял, что вы имеете в виду. Ctrl+P не то?
avatar
20 Prado • 21:21, 16.07.2015
Действительно отличный скрипт, автору уважуха! Поклацаю заодно по рекламе.
avatar
0
19 Reader • 22:08, 26.08.2014
Здраствуйте!
Скрипт роботает, очень благодарен за него.
Стандартный Лайтбокс на сайте юкоза не роботал, использовав Ваш. Добавил его в "Фотоальбом".
Помогите, пожалуйста. мне нуждо дабавить переключатели на ето окно (чтоб переключать между фотографиями в разделе).
avatar
18 dkplayer • 08:15, 15.01.2014
Спасибо за дополнение про лайтбокс. Про скрипт, тот что вы написали, конечно не сработает. Вы пытаетесь менять класс найденого тега "a", а нужно, как я понимаю его родителю div. Не уверен, но может вот таким образом:
Код


<script type="text/javascript">   
$(document).ready(function(){   
$('a[href$=".mp3"]').parent.addClass('jouele');   

});   
</script>   

При этом ссылка на mp3 файл уже должна быть помещена в div
avatar
16 vitkit3 • 00:51, 14.01.2014
Константин, обыскал весь интернет, не нашел, как можно сделать, чтобы фотографии перелистывались, как в фотоальбомах. Есть ли такая возможность вообще? Или можно увеличивать только по одной фотографии? Нужен какой-то дополнительный скрипт?
avatar
17 dkplayer • 06:54, 14.01.2014
Имеется в виду перелистывание в лайтбоксе, так как это работает в фотоальбомах?
avatar
15 Евген • 09:48, 01.02.2013
А можно сделать Lightbox для мини чата ? Уменьшение картинок не долго поставить,а вот как чтоб открывало в Lightbox.
avatar
10 DarkNorth • 00:51, 27.09.2012
Помогите, почему может не работать данных скрипт?
Пробую поставить на форум - 0 реакций.
картинки постят на форуме в виде [ img ]ссылка на картинку[ /img ]
avatar
11 dkplayer • 05:06, 28.09.2012
хотите помощи, не забывайте указывать адрес сайта
avatar
12 DarkNorth • 00:32, 29.09.2012
пардон.
Например вот это сообщение с картинкой:
http://play51.ru/forum/2-2-36-16-1345672265
в CSS стоит автоуменьшение:
Code
.posttdMessage img,
.eMessage img,
.eText img  
{
max-width:400px;
width:expression((this.width>400) ? "400px" : true);
max-height:400px;
height:expression((this.height>400) ? "400px" : true);
}

Хочется лайтбокс для ббкода img, как описал выше.
Смог только сделать обходной маневр:
Code
<script type="text/javascript">  
  $(document).ready(function(){  
  $('img[src$=".jpg"]').addClass('ulightbox');  
});  
</script>

Понятно, что можно как у Вас разные форматы изображений, но для тренировки пока так smile
Да и получается если добавлю .gif и другие, то будет влиять и на аватры, смайлы и т.п.

Суть в том что при нажатии на уменьшенное изображение оно увеличивается - ок, но пропадает с сообщения уменьшенное.
Надеюсь понятно объяснил.
Как сделать лайтбокс только для ббкода img? или что посоветуете?

Заранее спасибо.
avatar
13 DarkNorth • 09:23, 29.09.2012
Единственное что у меня получилось то добавить вот такой скрипт:
Code
<script type="text/javascript">      
      $(document).ready(function(){      
      $('img[src$=".jpg"]').addClass('ulightbox');      
});      
</script>

получается что на форуме уменьшенные изображения .jpg увеличиваются, но при закрытии увеличенной картинки её становится не видно вообще пока не обновлю страницу.

Но это все равно несколько не то, т.к. затрагивает и аватары пользователей тоже.

Добавлено (29 Сен 2012, 09:12)
---------------------------------------------
В общем временно на форуме сделал так:
Code

<script type="text/javascript">
     $(document).ready(function() {
     $('a[href$=".jpg"]').removeAttr('a[href$');
     $('a[href$=".jpeg"]').removeAttr('a[href$');
     $('.posttdMessage img[src$=".jpg"], img[src$=".jpeg"]').click(function(){var s="'sc'";     
     new _uWnd('sc','Реальный размер',100,100,{autosize:1,shadow:1,autosizeonimages:1,header:0},'<img src="'+$(this).attr('src')+'" align="center" alt="" onclick="_uWnd.close('+s+')" style="cursor:pointer;">');});     
});
     </script>

1. получается что картинки .jpg и .jpeg которые постятся как:
Code
[ img ]www.сайт.ру/картинка.jpg[ /img ]

открываются в ajax окне.
2. картинки которые прикрепляются непосредственно к сообщению в виде $IMAGE1$
открываются средствами стандартного ulightbox.
Две данные строки:
Code
$('a[href$=".jpg"]').removeAttr('a[href$');
     $('a[href$=".jpeg"]').removeAttr('a[href$');

для того что бы не было двойного развертывания картинки(ajax и ulightbox).
Хотелось, что бы всё работало через ulightbox.

Прошу сильно не пинать скрипты я вижу первый раз в жизни.
Бегло пробежал по функциям и вот такое накалякал smile
avatar
14 dkplayer • 10:19, 01.10.2012
Вообще, если вы внимательно посмотрите на код в моём посте, то там приписывается класс не к тегу img, а только к ссылке на картинку
Code

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

});
</script>    

Т.е. если стандартными средствами прикрепить изображение к материалу (или к посту форума) и вставить его кодом
Code
$IMAGE1$
то в сообщение вставляется конструкция из ссылки на большое изображение и уменьшенного изображения в качестве ссылочного содержимого. Соответственно этот код не затронет аватары, поскольку там ссылка будет не на картинку.
avatar
6 vitkit3 • 22:36, 25.07.2012
Забыл ссылку на страницу с картинкой дать: http://designall.ucoz.ru/publ/stikhi/vitalij_konshin/razmer_shrifta/1-1-0-187
avatar
7 dkplayer • 10:42, 28.07.2012
На указанной странице нет ссылок на картинки. Есть только встроенная картинка.
avatar
8 vitkit3 • 13:51, 25.08.2012
Понял разницу, встроенной картинки и ссылки. Как встраивать картинку на укозовский сервер тоже понятно. Не понятно, как правильно оформлять эту самую ссылку на картинку, если ссылка на картинку в интернет-хранилище. Методом тыка, копируя код встроенной стандартным способом картинки и подставляя в него другую ссылку, на картинку в хранилище, получается добиться желаемого, но чувствуешь себя при этом не очень хорошо. Извините, за эту тёмность, помогите разобраться, пожалуйста. Извините за беспокойство, разобрался сам. Смешно, но кое-как дошло, что требуется к маленькой картинке в документе привязать ссылку на большую картинку. Однако, появляется забавная особенность: не добавляется текст "Нажмите, для просмотра в полном размере..." Текст нужно добавлять самому, но это и к лучшему, потому что запятая после Нажмите не понятно для чего нужна.
avatar
9 dkplayer • 11:20, 26.08.2012
Да всё просто! Код представленный выше работает следующим образом он находит все теги <a> в параметре href которых ссылка на картинку. Иными слоавами в параметре href должен быть адрес заканчивающийся расширением .jpg, .jpeg, .gif или .png. Ко всем найденным таким ссылкам он применит класс CSS ulightbox. После этого скрипт ответсвенный за отображение картинок найдёт все ссылки с этим классом и будет их отображать в лайтбокс окне.
avatar
5 vitkit3 • 22:34, 25.07.2012
Не получается. Попробовал в блоге и в каталоге статей и длинный вариант кода, и короткий. Вот сюда вставляю в каталоге статей в шаблоне "Страница материала и комментариев к нему": <body style="background:#EBEDD7; margin:0px; padding:0px;"><script type="text/javascript">
$(document).ready(function(){
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox');

});
</script>
Где моя ошибка?
avatar
3 Kos • 03:22, 16.07.2012
Замечательная статья, сразу внедрил к себе. Константин, а можно ли сделать тоже самое с видео?
avatar
4 dkplayer • 07:36, 16.07.2012
С видео не пробовал, но скорее всего встроенный плагин не работает с ним
avatar
1 vitkit3 • 12:21, 29.06.2012
Уважаемый Константин, вопрос не совсем по теме, но проблема, с которой я столкнулся, не даёт воспользоваться вашим уроком. Оказывается, что в шаблоне дизайна, который я выбрал для своего сайта (821), в "Глобальных блоках" отсутствует "Верхняя часть сайта", есть "Нижняя часть сайта" и "Первый контейнер". Каким же образом сделать так, чтобы появилась эта самая "Верхняя часть сайта"? Проверил и убедился, что в других стандартных укозовских шаблонах дизайна этот компонент присутствует.
avatar
2 dkplayer • 14:52, 29.06.2012
Не беда. Обычно лайтбокс нужен только на страницах материала поэтому можно вставить предложенный код в шаблона "Страница материала и комментариев к нему" сразу после тэга <body>.

Как вариант сделать глобальный блок, вставить туда предлагаемый блок и затем, используя инструмент "Быстрая замена участков шаблонов" вставить код глобального блока во все шаблоны. Выглядеть это будет примерно так:
Что заменить: <body>
На что заменить: <body>$GLOBAL_BLOCKNAME$

Ну и конечно можно в конструкторе шаблонов выбрать ваш шаблон в качестве каркаса и отредактировать его добавив блок "Верхняя часть сайта".
avatar

При полном или частичном копировании материалов сайта, установка ссылки на сайт источник: http://www.showmehow.ru обязательна!