Хаки и Скрипты Next Generation CMS

Фоновое слайд шоу с BLUR эффектом HTML5

irbees2008 irbees2008 Опубликовано - 16 - февраля HTML5
5316 - 1
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

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

Код:
<link rel="stylesheet" type="text/css" href="{tpl_url}/css/style.css" />
<noscript>
<style>
.bx-loading{display:none;}
</style>
</noscript>
3.Это в тело страницы ,сама структура слайдера.
Код:
<div id="bx-wrapper" class="bx-wrapper">
<div class="bx-loading">
<span>Loading...</span>
</div>
<div class="bx-content">
<h2>Shushi Town</h2>
</div>
<div class="bx-thumbs">
<a href="#" class="bx-thumbs-current" style="background-image:url({tpl_url}/images/thumbs/1.jpg)"></a>
<a href="#" style="background-image:url({tpl_url}/images/thumbs/2.jpg)"></a>
<a href="#" style="background-image:url({tpl_url}/images/thumbs/3.jpg)"></a>
<a href="#" style="background-image:url({tpl_url}/images/thumbs/4.jpg)"></a>
<a href="#" style="background-image:url({tpl_url}/images/thumbs/5.jpg)"></a>
<a href="#" style="background-image:url({tpl_url}/images/thumbs/6.jpg)"></a>
<a href="#" style="background-image:url({tpl_url}/images/thumbs/7.jpg)"></a>
</div>
<div class="bx-container">
<img src="{tpl_url}/images/large/1.jpg" alt="image01" title="Shushi Town"/>
<img src="{tpl_url}/images/large/2.jpg" alt="image02" title="Raw Love"/>
<img src="{tpl_url}/images/large/3.jpg" alt="image03" title="Freshness"/>
<img src="{tpl_url}/images/large/4.jpg" alt="image04" title="Crunchbite"/>
<img src="{tpl_url}/images/large/5.jpg" alt="image05" title="Flavour Bomb"/>
<img src="{tpl_url}/images/large/6.jpg" alt="image06" title="Tenderness"/>
<img src="{tpl_url}/images/large/7.jpg" alt="image07" title="Aroma Paradise"/>
</div>
<div class="bx-overlay"></div>
</div>
4.Перед закрытием /body добавляем скрипты
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>/*если уже подключен jquery то повторно подключать не надо*/
<script type="text/javascript" src="{tpl_url}/js/StackBlur.js"></script>
<script type="text/javascript">
$(function() {

var BlurBGImage = (function() {

var $bxWrapper = $('#bx-wrapper'),
// loading status to show while preloading images
$bxLoading = $bxWrapper.find('div.bx-loading'),
// container for the bg images and respective canvas
$bxContainer = $bxWrapper.find('div.bx-container'),
// the bg images we are gonna use
$bxImgs = $bxContainer.children('img'),
// total number of bg images
bxImgsCount = $bxImgs.length,
// the thumb elements
$thumbs = $bxWrapper.find('div.bx-thumbs > a').hide(),
// the title for the current image
$title = $bxWrapper.find('h2:first'),
// current image's index
current = 0,
// variation to show the image:
// (1) - blurs the current one, fades out and shows the next image
// (2) - blurs the current one, fades out, shows the next one (but initially blurred)
// speed is the speed of the animation
// blur Factor is the factor used in the StackBlur script
animOptions = { speed : 700, variation : 1, blurFactor : 10 },
// control if currently animating
isAnim = false,
// check if canvas is supported
supportCanvas = Modernizr.canvas,

// init function
init = function() {

// preload all images and respective canvas
var loaded = 0;

$bxImgs.each( function(i) {

var $bximg = $(this);

// save the position of the image in data-pos
$('<img data-pos="' + $bximg.index() + '"/>').load(function() {

var $img = $(this),
// size of image to be fullscreen and centered
dim = getImageDim( $img.attr('src') ),
pos = $img.data( 'pos' );

// add the canvas to the DOM
$.when( createCanvas( pos, dim ) ).done( function() {

++loaded;

// all images and canvas loaded
if( loaded === bxImgsCount ) {

// show thumbs
$thumbs.fadeIn();

// apply style for bg image and canvas
centerImageCanvas();

// hide loading status
$bxLoading.hide();

// initialize events
initEvents();

}

});

}).attr( 'src', $bximg.attr('src') );

});

},
// creates the blurred canvas image
createCanvas = function( pos, dim ) {

return $.Deferred( function(dfd) {

// if canvas not supported return
if( !supportCanvas ) {
dfd.resolve();
return false;
}

// create the canvas element:
// size and position will be the same like the fullscreen image
var $img = $bxImgs.eq( pos ),
imgW = dim.width,
imgH = dim.height,
imgL = dim.left,
imgT = dim.top,

canvas = document.createElement('canvas');

canvas.className = 'bx-canvas';
canvas.width = imgW;
canvas.height = imgH;
canvas.style.width = imgW + 'px';
canvas.style.height = imgH + 'px';
canvas.style.left = imgL + 'px';
canvas.style.top = imgT + 'px';
canvas.style.visibility = 'hidden';
// save position of canvas to know which image this is linked to
canvas.setAttribute('data-pos', pos);
// append the canvas to the same container where the images are
$bxContainer.append( canvas );
// blur it using the StackBlur script
stackBlurImage( $img.get(0), dim, canvas, animOptions.blurFactor, false, dfd.resolve );

}).promise();

},
// gets the image size and position in order to make it fullscreen and centered.
getImageDim = function( img ) {

var $img = new Image();

$img.src = img;

var $win = $( window ),
w_w = $win.width(),
w_h = $win.height(),
r_w = w_h / w_w,
i_w = $img.width,
i_h = $img.height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;

if( r_w > r_i ) {

new_h = w_h;
new_w = w_h / r_i;

}
else {

new_h = w_w * r_i;
new_w = w_w;

}

return {
width : new_w,
height : new_h,
left : ( w_w - new_w ) / 2,
top : ( w_h - new_h ) / 2
};

},
// initialize the events
initEvents = function() {

$( window ).on('resize.BlurBGImage', function( event ) {

// apply style for bg image and canvas
centerImageCanvas();
return false;

});

// clicking on a thumb shows the respective bg image
$thumbs.on('click.BlurBGImage', function( event ) {

var $thumb = $(this),
pos = $thumb.index();

if( !isAnim && pos !== current ) {

$thumbs.removeClass('bx-thumbs-current');
$thumb.addClass('bx-thumbs-current');
isAnim = true;
// show the bg image
showImage( pos );

}

return false;

});

},
// apply style for bg image and canvas
centerImageCanvas = function() {

$bxImgs.each( function(i) {

var $bximg = $(this),
dim = getImageDim( $bximg.attr('src') ),
$currCanvas = $bxContainer.children('canvas[data-pos=' + $bximg.index() + ']'),
styleCSS = {
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
};

$bximg.css( styleCSS );

if( supportCanvas )
$currCanvas.css( styleCSS );

if( i === current )
$bximg.show();

});

},
// shows the image at position "pos"
showImage = function( pos ) {

// current image
var $bxImage = $bxImgs.eq( current );
// current canvas
$bxCanvas = $bxContainer.children('canvas[data-pos=' + $bxImage.index() + ']'),
// next image to show
$bxNextImage = $bxImgs.eq( pos ),
// next canvas to show
$bxNextCanvas = $bxContainer.children('canvas[data-pos='+$bxNextImage.index()+']');

// if canvas is supported
if( supportCanvas ) {

$.when( $title.fadeOut() ).done( function() {

$title.text( $bxNextImage.attr('title') );

});

$bxCanvas.css( 'z-index', 100 ).css('visibility','visible');

$.when( $bxImage.fadeOut( animOptions.speed ) ).done( function() {

switch( animOptions.variation ) {

case 1 :
$title.fadeIn( animOptions.speed );
$.when( $bxNextImage.fadeIn( animOptions.speed ) ).done( function() {

$bxCanvas.css( 'z-index', 1 ).css('visibility','hidden');
current = pos;
$bxNextCanvas.css('visibility','hidden');
isAnim = false;

});
break;
case 2 :
$bxNextCanvas.css('visibility','visible');

$.when( $bxCanvas.fadeOut( animOptions.speed * 1.5 ) ).done( function() {

$(this).css({
'z-index' : 1,
'visibility' : 'hidden'
}).show();

$title.fadeIn( animOptions.speed );

$.when( $bxNextImage.fadeIn( animOptions.speed ) ).done( function() {

current = pos;
$bxNextCanvas.css('visibility','hidden');
isAnim = false;

});

});
break;

};

});

}
// if canvas is not shown just work with the bg images
else {

$title.hide().text( $bxNextImage.attr('title') ).fadeIn( animOptions.speed );
$.when( $bxNextImage.css( 'z-index', 102 ).fadeIn( animOptions.speed ) ).done( function() {

current = pos;
$bxImage.hide();
$(this).css( 'z-index', 101 );
isAnim = false;

});

}

};

return {
init : init
};

})();

// call the init function
BlurBGImage.init();

});
</script>
5.Вроде все,кому что не понятно пишем комментарии или смотрим исходник.

Можешь почитать и вот эту статейку "Вкладки-Табы на jQuery и CSS"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4486 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [4]
  • Гости: [4]
  • Были сегодня : [4] Яндекс, Google, irbees2008, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 1.014сек
  • Потребление памяти: 5.191 Mb 
  •   Яндекс.Метрика