• 1749
  • 2
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Красивое полно экранное слайд шоу
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с шаблоном.
2.В хеад подключаем скрипты ,если jquery уже подключен то его подключать не надо.

Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.easing.1.3.js"></script>
3.В стили добавляем .
Код:
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
html,body{height:100%;}
body{margin:0px; padding:0px; background:#000; color:#FFFFFF;}
#toolbar{position:fixed; z-index:2; right:10px; top:10px; padding:5px; background:url(../images/fs_img_g_bg.png);}
#toolbar img{border:none;}
#img_title{position:fixed; z-index:2; left:10px; top:10px; padding:10px; background:url(../images/fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;}
#bg{position:fixed; z-index:1; overflow:hidden;}
#bgimg{display:none;}
#preloader{position:relative; z-index:2; width:32px; padding:20px; top:80px; margin:auto; background:#000;}
#outer_container{z-index:2; position:fixed; bottom:0; margin:0; height:170px; padding:40px 5px;}
#thumbScroller{position:relative; overflow:hidden; background:url(../images/fs_img_g_bg.png);}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{float:left;}
#thumbScroller .content div{margin:10px; height:100%;}
#thumbScroller img{border:5px solid #fff;}
#thumbScroller a{padding:5px; display:block;}
3.Между body вставляем сам слайдер
Код:
<div id="bg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_denebola.jpg" width="1680" height="1050" alt="Denebola" title="Denebola" id="bgimg" /></div>
<div id="preloader"><img src="{tpl_url}/images/ajax-loader_dark.gif" width="32" height="32" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="{tpl_url}/images/toolbar_fs_icon.png" width="50" height="50" /></a></div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="{tpl_url}/images/images/Universe_and_planets_digital_art_wallpaper_denebola.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_lux.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_dk.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_albireo.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_church.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_Decampment.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_moons.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_transitorius.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg"><img src="{tpl_url}/images/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a></div>
</div>
</div>
</div>
4.Теперь перед /body добавляем скрипт инициализации слайд шоу
Код:
<script>
$outer_container=$("#outer_container");
$thumbScroller=$("#thumbScroller");
$thumbScroller_container=$("#thumbScroller .container");
$thumbScroller_content=$("#thumbScroller .content");
$thumbScroller_thumb=$("#thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg="#bgimg";

$(window).load(function() {
//thumbnail scroller
sliderLeft=$thumbScroller_container.position().left;
padding=$outer_container.css("paddingRight").replace("px", "");
sliderWidth=$(window).width()-padding;
$thumbScroller.css("width",sliderWidth);
var totalContent=0;
fadeSpeed=200;

$thumbScroller_content.each(function () {
var $this=$(this);
totalContent+=$this.innerWidth();
$thumbScroller_container.css("width",totalContent);
$this.children().children().children(".thumb").fadeTo(fadeSpeed, 0.6);
});

$thumbScroller.mousemove(function(e){
if($thumbScroller_container.width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType="easeOutCirc";
if(mouseCoords>destX){
//$thumbScroller_container.css("left",-thePosA); //without easing
$thumbScroller_container.stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
} else if(mouseCoords<destX){
//$thumbScroller_container.css("left",thePosB); //without easing
$thumbScroller_container.stop().animate({left: thePosB}, animSpeed,easeType); //with easing
} else {
$thumbScroller_container.stop();
}
}
});

$outer_container.fadeTo(fadeSpeed, 0.8);
$outer_container.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("slow", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("slow", 0);
}
);

$thumbScroller_thumb.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 0.6);
}
);

//on window resize scale image and reset thumbnail scroller
$(window).resize(function() {
FullScreenBackground($bgimg);
$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc");
var newWidth=$(window).width()-padding;
$thumbScroller.css("width",newWidth);
sliderWidth=newWidth;
});

FullScreenBackground($bgimg); //scale 1st image
});

$($bgimg).load(function() {
$preloader.fadeOut("fast"); //hide preloader
var $this=$(this);
$this.removeAttr("width").removeAttr("height").css({ width: "", height: "" });
FullScreenBackground($this);
var imageTitle=$("#img_title").data("imageTitle");
if(imageTitle){
$this.attr("alt", imageTitle).attr("title", imageTitle);
$("#img_title").html(imageTitle);
} else {
$("#img_title").html($(this).attr("title"));
}
$this.fadeIn("slow"); //fadein background image
});

//mouseover toolbar
$toolbar.fadeTo("fast", 0.4);
$toolbar.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("fast", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("fast", 0.4);
}
);

//Clicking on thumbnail changes the background image
$("#outer_container a").click(function(event){
event.preventDefault();
$preloader.fadeIn("fast"); //show preloader
var $this=$(this);
var title_attr=$this.children("img").attr("title"); //get image title attribute
$("#img_title").data("imageTitle", title_attr); //store image title
$($bgimg).css("display","none").attr("src", this); //change image source
});

//Image scale function
function FullScreenBackground(theItem){
var winWidth=$(window).width();
var winHeight=$(window).height();
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
if ((winHeight / winWidth) < picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
} else { //normal size image mode
if ((winHeight / winWidth) > picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
}
$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
}

//Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
$toolbar.data("imageViewMode", theMode);
FullScreenBackground($bgimg);
if(theMode=="full"){
$toolbar_a.html("<img src='{tpl_url}/images/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
} else {
$toolbar_a.html("<img src='{tpl_url}/images/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
}
}
</script>
Вот и все ,смотрим демо
Настройки
$ defaultViewMode = "full" ; / / полный, нормальный, оригинальная (full, normal, original)
$ tsMargin = 30 ; / / первый и последний маржа миниатюрами (для улучшения взаимодействия курсора)
$ scrollEasing = 600 ; / / прокрутки ослабления количество (0 для отмены смягчения)
$ scrollEasingType = "easeOutCirc" ; / / прокрутки ослабления типа
$ thumbnailsContainerOpacity = 0,8 ; / / миниатюры площадь умолчанию непрозрачность
$ thumbnailsContainerMouseOutOpacity = 0 ; / / миниатюры площадь непрозрачность на мыши из
$ thumbnailsOpacity = 0,6 ; / / миниатюры умолчанию непрозрачность
$ nextPrevBtnsInitState = "show" ; / / следующая / предыдущая кнопки изображения начальное состояние ("спрятать" или "шоу")
$ KeyboardNavigation = "on" ; / / включить / выключить навигация с помощью клавиатуры "on" or "off")

Можешь почитать и вот эту статейку "Ну С Новым 2017 Годом ))))"

mistakes

Это тоже интересно

    irbees2008

    irbees2008 | 8.04.2014 - 15:12

    размер картинок можешь и сам задать и растянуть как тебе надо,но при этом пострадает качество большого изображения.

    ответить

    jam00

    jam00 | 8.04.2014 - 06:29

    А большие картинки загружаются сразу (при загрузке страницы) или подгружаются постепенно?
    Это я к тому, что если сразу - слайдшоу уже картинок из 150-200 будет долго грузиться.

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

    ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element