Последние темы на форуме:

412345 Рейтинг: 4.00 (172 голосов)

Оглавление:

  10кб скрипта для цивильного открытия картинок задействовали в Joomla!, но так же его можно использовать и в форуме SMF.
  Можно конечно пойти более простым путем - установить МОД:
      Integrate_Lightbox_v1.6.zip (34kB)
      HS4SMF_0.7.tar.gz (103kB)
  После распаковки размер скриптов станет в пару раз больше, а можно просто дописать в код пару строчек на 6кб и получить тот же эффект без увеличения нагрузки на сервер:
  В папке с форумом создаем папку lightbox, туда заливаем содержимое архива lightbox SMF (только содержимое папки!).
  Открываем файл Display.template.php
  Найти:

';
  Заменить на:

';

/forum/Themes/default/script.js
  Добавить в конце:

var loadingImage='/forum/lightbox/loading.gif';var closeButton='/forum/lightbox/close.gif';function getPageScroll(){var yScroll;if(self.pageYOffset){yScroll=self.pageYOffset;}else if(document.documentElement&&document.documentElement.scrollTop){yScroll=document.documentElement.scrollTop;}else if(document.body){yScroll=document.body.scrollTop;}
arrayPageScroll=new Array('',yScroll)
return arrayPageScroll;}
function getPageSize(){var xScroll,yScroll;if(window.innerHeight&&window.scrollMaxY){xScroll=document.body.scrollWidth;yScroll=window.innerHeight+window.scrollMaxY;}else if(document.body.scrollHeight>document.body.offsetHeight){xScroll=document.body.scrollWidth;yScroll=document.body.scrollHeight;}else{xScroll=document.body.offsetWidth;yScroll=document.body.offsetHeight;}
var windowWidth,windowHeight;if(self.innerHeight){windowWidth=self.innerWidth;windowHeight=self.innerHeight;}else if(document.documentElement&&document.documentElement.clientHeight){windowWidth=document.documentElement.clientWidth;windowHeight=document.documentElement.clientHeight;}else if(document.body){windowWidth=document.body.clientWidth;windowHeight=document.body.clientHeight;}
if(yScrollexitTime)
return;}}
function getKey(e){if(e==null){keycode=event.keyCode;}else{keycode=e.which;}
key=String.fromCharCode(keycode).toLowerCase();if(key=='x'){hideLightbox();}}
function listenKey(){document.onkeypress=getKey;}
function showLightbox(objLink)
{var objOverlay=document.getElementById('overlay');var objLightbox=document.getElementById('lightbox');var objCaption=document.getElementById('lightboxCaption');var objImage=document.getElementById('lightboxImage');var objLoadingImage=document.getElementById('loadingImage');var objLightboxDetails=document.getElementById('lightboxDetails');var arrayPageSize=getPageSize();var arrayPageScroll=getPageScroll();if(objLoadingImage){objLoadingImage.style.top=(arrayPageScroll[1]+((arrayPageSize[3]-35-objLoadingImage.height)/2)+'px');objLoadingImage.style.left=(((arrayPageSize[0]-20-objLoadingImage.width)/2)+'px');objLoadingImage.style.display='block';}
objOverlay.style.height=(arrayPageSize[1]+'px');objOverlay.style.display='block';imgPreload=new Image();imgPreload.onload=function(){objImage.src=objLink.href;var lightboxTop=arrayPageScroll[1]+((arrayPageSize[3]-35-imgPreload.height)/2);var lightboxLeft=((arrayPageSize[0]-20-imgPreload.width)/2);objLightbox.style.top=(lightboxTop<0)?"0px":lightboxTop+"px";objLightbox.style.left=(lightboxLeft<0)?"0px":lightboxLeft+"px";objLightboxDetails.style.width=imgPreload.width+'px';if(objLink.getAttribute('title')){objCaption.style.display='block';objCaption.innerHTML=objLink.getAttribute('title');}else{objCaption.style.display='none';}
if(navigator.appVersion.indexOf("MSIE")!=-1){pause(250);}
if(objLoadingImage){objLoadingImage.style.display='none';}
objLightbox.style.display='block';arrayPageSize=getPageSize();objOverlay.style.height=(arrayPageSize[1]+'px');listenKey();return false;}
imgPreload.src=objLink.href;}
function hideLightbox()
{objOverlay=document.getElementById('overlay');objLightbox=document.getElementById('lightbox');objOverlay.style.display='none';objLightbox.style.display='none';document.onkeypress='';}
function initLightbox()
{if(!document.getElementsByTagName){return;}
var anchors=document.getElementsByTagName("a");for(var i=0;iX для закрытия.';objLightboxDetails.appendChild(objKeyboardMsg);}
function addLoadEvent(func)
{var oldonload=window.onload;if(typeof window.onload!='function'){window.onload=func;}else{window.onload=function(){oldonload();func();}}}
addLoadEvent(initLightbox);

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

/forum/Themes/default/style.css
  Добавить в конце:

/*LIGHTBOX*/
#lightbox{background-color:#EEE; padding:10px; border-bottom:2px solid #666; border-right:2px solid #666}
 #lightboxDetails{font-size:0.8em; padding-top:0.4em}
 #lightboxCaption{float:left}
 #keyboardMsg{float:right}
 #closeButton{top:5px; right:5px}
 #lightbox img{border:none;clear:both}
 #overlay img{border:none}
 #overlay{background-image:url(/forum/lightbox/overlay.png)}
/*END LIGHTBOX*/

Вуаля!

Комментарии  

+3 #1 Delik 27.09.2011 09:34
а на карточке товара виртуемарте (не сама фотка товара а картинки в описании) в будет работать?
+1 #2 Valery 27.09.2011 10:45
А почему же нет?
Этот скрипт и на форуме SMF и в Adsmanager и в фотоалерее трудится ...
Дописать только надо в этом маркете где-то rel="lightbox"
+3 #3 Delik 27.09.2011 16:49
спасибо, Valery, скрипт дельный
ну за исключением того, что нужны 2 картинки
+2 #4 PMS 14.12.2011 07:10
Ну надо ж - только озадачился - зашел именно сюда - и... - вот оно...
да....
Вот спасибо - бум пробовать...

Попробовал. При первой вставке скрипта ругнулся Апача на ошибку - но более ни разу не повторялось.
И еще. Если в материале ранее стоит просто img без ссылки и твоего скрипта, то далее, если использую скрипт для следующего img, то скрипт не работает.

Правда не всегда....
+2 #5 Xandr 02.11.2012 05:06
Пожалуй, лучший скрипт. Спасибо!

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

Коммент без ссылок, символов, кодов и прочей ереси!