Вебдизайн и Техническая поддержка
Skype: disbb.ru
Контакты: обратная связь
Часы работы:
Пн-Пт 10:00-18:00
* по московскому времени


Слайд-шоу в сообщениях на форуме (Deff)


Скриншот

  • По клику на картинки в сообщениях происходит запуск слайдшоу с прокруткой картинок.
  • Демо
  • Автор: Deff
  • Платформа: MyBB
  • Категория: Сообщения (посты) на форуме
  • Оценка: 5.0/1

  • Скачать (9.1 Kb)
  • 12.06.2015, 17:08

Скриншот Скриншот Скриншот

Слайд-шоу в сообщениях на форуме.
(Новый Вариант) на базе галереи iload

Слайд шоу запускается по клику на картинку (на картинке показано нажатие на кнопку "Cлайд-Шоу Автоплей")
Можно пролистывать картинки в ручном режиме, либо стрелочками в нижнем меню.
Клик по черному полю (или ESC/CTRL) - возврат в топик
Если экран не позволяет увидеть полную картинку, есть возможность просмотреть полное превью, rликая на кнопку "Оригинал"
Для полного просмотра полномасштабного изображения его можно перемещать по экрану зажав на нём левую клавишу мыши (Отпускание - второй клик "мышкой")

В HTML низ:
Код
<!--Слайдшоу в Топике -->
<script>if('\v'=='v'){$(document).ready(function(){
$.getScript("http://premod.mybb.ru/files/0010/b4/f8/96425.js");});
} else {$.getScript("http://premod.mybb.ru/files/0010/b4/f8/96425.js");}
</script>
<script type="text/javascript">
/********************************************************
  МАССИВ ССЫЛОК НА КАРТИНКИ, ИСКЛЮЧАЕМЫХ ИЗ СЛАЙД-ШОУ
********************************************************/
var Arr_notPreview =[
"http://savepic.ru/2352396.gif",
"http://alik.forumrpg.ru/uploads/000c/fa/7e/560-1.gif",
"http://alik.forumrpg.ru/uploads/000c/fa/7e/558-2.gif",
"End" ];
// var guest_access=true;
</script>
<style>
.Obrml1{
border:outset #fff 1px;
margin-bottom:2px;
}
.L_5 {  
background-attachment: scroll;
background-clip: border-box;
background-color: #000000;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
z-index: 9999;
position: fixed;
}
.L_5, .L_6, .L_7 {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: block;
  }
.Obrml{
border:solid #fff 1px;
border-width:7px 7px 12px 7px;
}
.tipsy .tipsy-inner {
letter-spacing:1px!important;
}
.tipsy.slide .tipsy-inner {
font-size:12px!important;
}
</style>
<!--<link rel="stylesheet" href="http://premod.mybb.ru/files/0010/b4/f8/26092.css"/>-->
<script>
//8888888888888 = 19 ИЮНЯ 2012Г.: ОБНОВЛЕННЫЙ UPLOADS.RU = 888888888888888888//
$(".post-content .postimg").parent("a[href*='http://uploads.ru/?v=']").each(function(){
  var a=($(this).attr("href"));
  a=a.replace('http://uploads.ru/?v=','http://s1.uploads.ru/i/');
});
//8888888888888 = СЛАЙД-ШОУ В СООБЩЕНИЯХ ТОПИКА = 888888888888888888//
if($("#pun-viewtopic").length){if(typeof(guest_access)=='undefined'){var guest_access=false;}
var FirstCheck_to_HOST=true;

  $(".post .post-body img[src^='/uploads/']").each(function(){
  $(this).addClass("postimg");
  $(this).attr("alt",$(this).attr("src"));
  });

if(typeof(Arr_notPreview)!='undefined'){
for(var i=0; i<(Arr_notPreview.length-1); i++){
  $(".post img[src='"+Arr_notPreview[i]+"'].postimg").each(function(){
  $(this).addClass("notPreview");
  });
}}
//888888888888888 = ANALIZ and SETTIN = 888888888888888888//

  $(".post a .postimg").each(function(){
  var a1=$(this).parent("a").attr("href");
  var a2=$(this).attr("src");
  var a3=$(this).attr("alt");
  var a=a1.replace(/^\S*\/click\.php\?/img,'')//убрали Кликер-переход;
  $(this).parents("a").attr("href",a) //убрали Кликер-переход из a
  var img_extens=['jpg','png','gif','jpeg']
  var ImgExt=false,aNotExt;for(var i in img_extens){

  var pattern="\\."+img_extens[i]+"$";var regexp=new RegExp(pattern,"img");
  aNoExt=a.replace(regexp,''); if(a!=aNoExt){ImgExt=true;break}};

  if(ImgExt){var S=aNoExt.replace(/\S{5}\/\/uploads\.ru\/\?v=/img,'');
  if(S!=aNoExt){S=a.replace(/\S{5}\/\/uploads\.ru\/\?v=/img,'');
  S=a3.replace(/\/[^\/]*$/img,'/'+S);a=S.replace(/\/\/uploads.ru\/t\//img,'//uploads.ru/i/')};
  } else {if(a.indexOf("http://savepic")!=-1){
  S=a3.replace(/m(\.\S{3,4})$/img,'$1');if(S!=a3){a=S;ImgExt=true;}}
  }
  if(ImgExt){
  if($.trim(a)!=''){$(this).attr("alt",a);$(this).parents("a").attr("href",a)}
  else{$(this).parents("a").attr("href",$(this).attr("src"));}
  }else {$(this).parents("a").addClass("hTml")}
  });

function SetIload(a){
  a.addClass("Iload");a.find(".postimg").attr("title","Просмотр Слайд-шоу?");
  a.attr("rel","iLoad|Post-image");
  var b = a.parents(".post").find(".pa-author a").text();//alert(b)
  var c = a.parents(".post").find("h3:first span strong:first").text();//alert(c)
  str="|post "+c+"; Aвтор: "+b;
  a.attr("a-title",str);a.attr("title",str);
}
function ImgPostLoad(){
$(".post .postimg").not(".notPreview").each(function(){
  var w = parseInt($(this).width(),10);//alert(w)
  var h = parseInt($(this).height(),10);j=w-14;
  var a = $(this).parents("a");
  var b = $(this).attr("alt");
  var c = '<span class=Obrml1 style="display:inline-block;"><span class=Obrml style="width:'+j+'px;display:inline-block;"></span></span>';
  if(a.length){$(this).addClass("Ref")} else {
  if(w>67 && h > 65){
  $(this).addClass("NoRef");$(this).wrap('<a href="'+b+'" target="_blank"></a>');
  }} a=$(this).parents("a");
  if(!a.hasClass("hTml")){SetIload($(this).parent("a"));a.wrap(c);
  }else {a.attr("title","Переход по ссылке");}
  });
}

var tst='<div id=show_stLoad style="width:100%;height:12px;border:none transparent;visibility:hidden;"><img id="Gif_test" style="height:100%;width:100%;" src="../i/blank.gif" /></div>';
$("#html-footer").prepend(tst);
function AnimTstLoad(){var a=$("#show_stLoad1,#t_stLoad"),b=$("#show_stLoad1 *");
b.animate({opacity:.05},1800,"linear", function(){a.replaceWith("");});}
function TstLoad(){var a=$("#Gif_test").height();
if(a>11){ImgPostLoad()}else {timerID = setTimeout("TstLoad()",100);return;}}
  if(GroupID!=3||guest_access){TstLoad();
$(".post .Iload .postimg").mousedown(function(){
$(this).parent(".Iload").attr("title",$(this).parent(".Iload").attr("a-title"));
  });
$(".post .Iload .postimg").mouseover(function(){
$(this).parents(".Iload").removeAttr("title")
  }).mouseout(function(){
$(this).parents(".Iload").attr("title",$(this).parents(".Iload").attr("a-title"))
  });
$("#pun-viewtopic a.Iload img.postimg").tipsy({live: true, gravity: 'w slide'});
$("#pun-viewtopic a.hTml").tipsy({live: true, gravity: 'w slide'});
  }
}//End //if($("#pun-viewtopic").length)//
</script>
<!-- End//Слайдшоу в Топике -->

Пояснения
Расмотрим вот этот кусок скрипта:
Цитата
<script type="text/javascript">
/********************************************************
МАССИВ ССЫЛОК НА КАРТИНКИ, ИСКЛЮЧАЕМЫХ ИЗ СЛАЙД-ШОУ
********************************************************/
var Arr_notPreview =[
"http://savepic.ru/2352396.gif",
"http://alik.forumrpg.ru/uploads/000c/fa/7e/560-1.gif",
"http://alik.forumrpg.ru/uploads/000c/fa/7e/558-2.gif",

"End" ];
// var guest_access=true;
</script>

Красным - массив ссылок, исключаемых из слайд шоу (обычно это слишком крупные смайлы)
Cиним - две косые черты. Удаляем, если нужен просмотр слайд-шоу под гостем.
Теги: mybb, Deff, Сообщения (посты) на форуме, скрипт

Просмотров: 635, Загрузок: 26, Оценка: 5.0 (1)
Страницы:
Имя *:
Email *:
Код *:
Сайт создан в системе uCoz