см. исходник (там же можно и скачать-слайд галерею): official web paralax
DEMO
вот в итоге скрин того, чего я пытаюсь добиться:
Спустя 1 час, 13 минут, 19 секунд (15.09.2011 - 13:36) redreem написал(а):
выкладывайте ваши исходники, за вас никто собирать страничку с проблемой не будет.
Спустя 17 минут, 47 секунд (15.09.2011 - 13:54) Stasonix написал(а):
| Цитата (redreem @ 15.09.2011 - 10:36) |
| выкладывайте ваши исходники, за вас никто собирать страничку с проблемой не будет. |
это и есть мой исходник, другого нет, просто в тег li добавте блок div, а дальше нужно уже что-то делать, но что именно у меня уже варианты просто закончились, вся надежда на форум:
жалко что сюда архив нельзя добавить, только исходник, ну тогда скачать думаю исходник от туда не для кого не проблема, просто файлы index.html и style.css замените на вот это:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Parallax Slider with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Parallax Slider with jQuery" />
<meta name="keywords" content="parallax, jquery, slider, slideshow, rotation, perspective"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #000'});
Cufon.replace('h2',{ textShadow: '1px 1px #000'});
Cufon.replace('.footer',{ textShadow: '1px 1px #000'});
Cufon.replace('.pxs_loading',{ textShadow: '1px 1px #000'});
</script>
</head>
<body>
<div class="wrapper">
<h1>Parallax Slider Demo</h1>
<h2>Create some depth with the parallax effect</h2>
</div>
<div id="pxs_container" class="pxs_container">
<div class="pxs_bg">
<div class="pxs_bg1"></div>
<div class="pxs_bg2"></div>
<div class="pxs_bg3"></div>
</div>
<div class="pxs_loading">Loading images...</div>
<div class="pxs_slider_wrapper">
<ul class="pxs_slider">
<li> <!-- ВОТ КОНТЕЙНЕР ФОТКИ -->
<img src="images/5.jpg" alt="First Image" />
<DIV id='info' class='clinf'> INFORMATION </DIV> <!-- ВОТ БЛОК ИНФОРМАЦИИ -->
</li>
<li><img src="images/6.jpg" alt="Second Image" /></li>
<li><img src="images/5.jpg" alt="Third Image" /></li>
<li><img src="images/6.jpg" alt="Forth Image" /></li>
<li><img src="images/5.jpg" alt="Fifth Image" /></li>
<li><img src="images/6.jpg" alt="Sixth Image" /></li>
</ul>
<div class="pxs_navigation">
<span class="pxs_next"></span>
<span class="pxs_prev"></span>
</div>
<ul class="pxs_thumbnails">
<li><img src="images/thumbs/5.jpg" alt="First Image" /></li>
<li><img src="images/thumbs/6.jpg" alt="Second Image" /></li>
<li><img src="images/thumbs/5.jpg" alt="Third Image" /></li>
<li><img src="images/thumbs/6.jpg" alt="Forth Image" /></li>
<li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
<li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
</ul>
</div>
</div>
<div class="footer">
<a href="http://tympanus.net/codrops/2011/01/03/parallax-slider/"><< Back to the Codrops tutorial</a>
<a href="http://www.flickr.com/photos/tetsumo/" target="_blank">Images by talented Tetsumo</a>
More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(function($) {
$.fn.parallaxSlider = function(options) {
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
return this.each(function() {
var $pxs_container = $(this),
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
//the main slider
var $pxs_slider = $('.pxs_slider',$pxs_container),
//the elements in the slider
$elems = $pxs_slider.children(),
//total number of elements
total_elems = $elems.length,
//the navigation buttons
$pxs_next = $('.pxs_next',$pxs_container),
$pxs_prev = $('.pxs_prev',$pxs_container),
//the bg images
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
//current image
current = 0,
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
//the thumbs
$thumbs = $pxs_thumbnails.children(),
//the interval for the autoplay mode
slideshow,
//the loading image
$pxs_loading = $('.pxs_loading',$pxs_container),
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
//first preload all the images
var loaded = 0,
$images = $pxs_slider_wrapper.find('img');
$images.each(function(){
var $img = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == total_elems*2){
$pxs_loading.hide();
$pxs_slider_wrapper.show();
//one images width (assuming all images have the same sizes)
var one_image_w = $pxs_slider.find('img:first').width();
/*
need to set width of the slider,
of each one of its elements, and of the
navigation buttons
*/
setWidths($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev);
/*
set the width of the thumbs
and spread them evenly
*/
$pxs_thumbnails.css({
'width' : one_image_w + 'px',
'margin-left' : -one_image_w/2 + 'px'
});
var spaces = one_image_w/(total_elems+1);
$thumbs.each(function(i){
var $this = $(this);
var left = spaces*(i+1) - $this.width()/2;
$this.css('left',left+'px');
if(o.thumbRotation){
var angle = Math.floor(Math.random()*41)-20;
$this.css({
'-moz-transform' : 'rotate('+ angle +'deg)',
'-webkit-transform' : 'rotate('+ angle +'deg)',
'transform' : 'rotate('+ angle +'deg)'
});
}
//hovering the thumbs animates them up and down
$this.bind('mouseenter',function(){
$(this).stop().animate({top:'-10px'},100);
}).bind('mouseleave',function(){
$(this).stop().animate({top:'0px'},100);
});
});
//make the first thumb be selected
highlight($thumbs.eq(0));
//slide when clicking the navigation buttons
$pxs_next.bind('click',function(){
++current;
if(current >= total_elems)
if(o.circular)
current = 0;
else{
--current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
$pxs_prev.bind('click',function(){
--current;
if(current < 0)
if(o.circular)
current = total_elems - 1;
else{
++current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
/*
clicking a thumb will slide to the respective image
*/
$thumbs.bind('click',function(){
var $thumb = $(this);
highlight($thumb);
//if autoplay interrupt when user clicks
if(o.auto)
clearInterval(slideshow);
current = $thumb.index();
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
/*
activate the autoplay mode if
that option was specified
*/
if(o.auto != 0){
o.circular = true;
slideshow = setInterval(function(){
$pxs_next.trigger('click');
},o.auto);
}
/*
when resizing the window,
we need to recalculate the widths of the
slider elements, based on the new windows width.
we need to slide again to the current one,
since the left of the slider is no longer correct
*/
$(window).resize(function(){
w_w = $(window).width();
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
1,
o.easing,
o.easingBg);
});
}
}).error(function(){
alert('here')
}).attr('src',$img.attr('src'));
});
});
};
//the current windows width
var w_w = $(window).width();
var slide = function(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
speed,
easing,
easingBg){
var slide_to = parseInt(-w_w * current);
$pxs_slider.stop().animate({
left : slide_to + 'px'
},speed, easing);
$pxs_bg3.stop().animate({
left : slide_to/2 + 'px'
},speed, easingBg);
$pxs_bg2.stop().animate({
left : slide_to/4 + 'px'
},speed, easingBg);
$pxs_bg1.stop().animate({
left : slide_to/8 + 'px'
},speed, easingBg);
}
var highlight = function($elem){
$elem.siblings().removeClass('selected');
$elem.addClass('selected');
}
var setWidths = function($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev){
/*
the width of the slider is the windows width
times the total number of elements in the slider
*/
var pxs_slider_w = w_w * total_elems;
$pxs_slider.width(pxs_slider_w + 'px');
//each element will have a width = windows width
$elems.width(w_w + 'px');
/*
we also set the width of each bg image div.
The value is the same calculated for the pxs_slider
*/
$pxs_bg1.width(pxs_slider_w + 'px');
$pxs_bg2.width(pxs_slider_w + 'px');
$pxs_bg3.width(pxs_slider_w + 'px');
/*
both the right and left of the
navigation next and previous buttons will be:
windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
*/
var position_nav = w_w/2 - one_image_w/2 + 3;
$pxs_next.css('right', position_nav + 'px');
$pxs_prev.css('left', position_nav + 'px');
}
$.fn.parallaxSlider.defaults = {
auto : 0, //how many seconds to periodically slide the content.
//If set to 0 then autoplay is turned off.
speed : 1000,//speed of each slide animation
easing : 'jswing',//easing effect for the slide animation
easingBg : 'jswing',//easing effect for the background animation
circular : true,//circular slider
thumbRotation : true//the thumbs will be randomly rotated
};
//easeInOutExpo,easeInBack
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
var $pxs_container = $('#pxs_container');
$pxs_container.parallaxSlider();
});
</script>
</body>
</html>
файл стиля style.css
*{
margin:0;
padding:0;
}
body{
font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
font-size:14px;
background:#222;
color:#333;
text-shadow:1px 1px 1px #fff;
overflow-x:hidden;
}
h1{
font-size:56px;
color:#ccc;
}
h2{
font-size:20px;
padding:10px 0px 10px 0px;
margin:15px 0px 20px 0px;
}
a{
color:#555;
text-decoration:none;
}
a:hover{
color:#222;
}
p{
padding:5px 0px;
}
.wrapper{
width:960px;
margin:20px auto;
}
.clear{
clear:both;
}
.footer{
text-align:center;
width:100%;
padding:20px 0px;
clear:both;
margin-top:30px;
}
.footer a{
margin:0px 20px;
}
/* Slider Style */
.pxs_container{
width:100%;
height:420px;
position:relative;
border-top:7px solid #333;
border-bottom:7px solid #333;
overflow:hidden;
-moz-box-shadow:0px 0px 7px #000;
-webkit-box-shadow:0px 0px 7px #000;
box-shadow:0px 0px 7px #000;
}
.pxs_bg{
background:transparent url(../images/bg.png) repeat top left;
}
.pxs_bg div{
position:absolute;
top:0px;
left:0px;
width:7584px; /*1264px window width times number of images*/
height:420px;
background-repeat:repeat;
background-position:top left;
background-color:transparent;
}
.pxs_bg .pxs_bg1{
background-image:url(http://www.htmldrive.net/edit_media/2010/201011/20101119/AnimatedPortfolioGallery/webtreats2.jpg);
/*left negative 1/8 of ww*/
}
.pxs_bg .pxs_bg2{
background-image:url(../images/bg2.png);
/*left negative 1/4 of ww*/
}
.pxs_bg .pxs_bg3{
background-image:url(../images/bg3.png);
/*left negative 1/2 of ww*/
}
.pxs_slider_wrapper{
display:none;
}
.pxs_container ul{
margin:0px;
padding:0px;
list-style:none;
}
ul.pxs_slider{
position:absolute;
left:0px;
top:0px;
height:420px;
}
ul.pxs_slider li{
height:420px;
float:left;
position:relative;
}
ul.pxs_slider li img{
display:block;
margin:35px auto 0px auto;
-moz-box-shadow:0px 0px 7px #222;
-webkit-box-shadow:0px 0px 7px #222;
box-shadow:0px 0px 7px #222;
border: 8px solid transparent;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
ul.pxs_thumbnails{
height:35px;
position:absolute;
top:320px;
left:50%;
}
ul.pxs_thumbnails li{
position:absolute;
display:block;
}
ul.pxs_thumbnails li img{
border: 5px solid #FFFFFF;
-moz-box-shadow:1px 1px 7px #555;
-webkit-box-shadow:1px 1px 7px #555;
box-shadow:1px 1px 7px #555;
cursor:pointer;
display:block;
opacity:0.7;
}
ul.pxs_thumbnails li.selected img{
opacity:1.0;
}
.pxs_navigation span{
position:absolute;
width:30px;
height:60px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
top:145px;
opacity:0.6;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
cursor:pointer;
}
.pxs_navigation span:hover{
opacity:0.9;
}
.pxs_navigation span.pxs_prev{
background:#000 url(../images/prev.png) no-repeat center center;
}
.pxs_navigation span.pxs_next{
background:#000 url(../images/next.png) no-repeat center center;
}
.pxs_loading{
color:#fff;
font-size:20px;
padding:15px 15px 15px 50px;
position:absolute;
background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
opacity:0.7;
width:180px;
position:absolute;
top:150px;
left:50%;
margin-left:-90px;
}
/* ВОТ КЛАСС ИНФОРМАЦИОННОГО ПОЛЯ */
.clinf {
width: 200px;
height: 400px;
background: blue;
border: 5px solid yellow;
}
я бы сразу архив сюда вставил, что копи паст не напрягал, но не получается.
Спустя 13 минут, 24 секунды (15.09.2011 - 14:07) redreem написал(а):
попробуйте как-то так:
правда могут быть проблемы с "соскакиванием" дива с инфой вниз изза бордеров, маргинов, паддингов. начните для него с width:20% скажем.
<li> <!-- ВОТ КОНТЕЙНЕР ФОТКИ -->
<div style="position:relative;width:100%;height:100%;">
<img style="position:relative;float:left;display-inline;overflow:hidden;width:70%" src="images/5.jpg" alt="First Image" />
<DIV id='info' class='clinf' style="position:relative;float:left;display-inline;overflow:hidden;width:30%"> INFORMATION </DIV> <!-- ВОТ БЛОК ИНФОРМАЦИИ -->
</div>
</li>
правда могут быть проблемы с "соскакиванием" дива с инфой вниз изза бордеров, маргинов, паддингов. начните для него с width:20% скажем.
Спустя 14 минут, 58 секунд (15.09.2011 - 14:22) Stasonix написал(а):
/* КЛАСС ФОТКИ */
ul.pxs_thumbnails li img{
border: 5px solid #FFFFFF;
-moz-box-shadow:1px 1px 7px #555;
-webkit-box-shadow:1px 1px 7px #555;
box-shadow:1px 1px 7px #555;
cursor:pointer;
display:block;
opacity:0.7;
position: relative;
float: left;
display-inline;
overflow: hidden;
width: 70%;
}
/* ВОТ КЛАСС ИНФОРМАЦИОННОГО ПОЛЯ */
.clinf {
position: relative;
width: 20%;
height: 400px;
background: blue;
border: 5px solid yellow;
float: left;
display-inline;
overflow: hidden;
}
html:
<li> <!-- ВОТ КОНТЕЙНЕР ФОТКИ -->
<div style="position: relative; height: 100%; width: 100%;">
<img src="images/5.jpg" alt="First Image" />
<DIV id='info' class='clinf'> INFORMATION </DIV> <!-- ВОТ БЛОК ИНФОРМАЦИИ -->
</div>
</li>
в итоге слайдер перестает работать, для самой фотки нельзя создавать отдельный контейнер, т.к. js работать не будет, не знаю, может увеличить li, но там опять же только через js
Спустя 3 минуты, 43 секунды (15.09.2011 - 14:26) Stasonix написал(а):
может вы имели в виду
display: inline, а не display-inline? все равно плохо, что так что так.Спустя 27 минут, 41 секунда (15.09.2011 - 14:54) redreem написал(а):
если никто не ответит - поковыряю скрипт вечерком, щас работы завал.
Спустя 21 минута, 21 секунда (15.09.2011 - 15:15) Stasonix написал(а):
я тож ковыряю, но толку, моя позиция такая, так как width самого li устанавливается javascript-ом, то просто немножко подкорректировать, напр. +100 добавить, не знаю точно куда, но добавить, и тогда думаю можно будет вместить блок с инфом, может найдешь еще какой-нть вариант, спс.
Спустя 2 часа, 27 минут, 22 секунды (15.09.2011 - 17:42) Stasonix написал(а):
как вариант еще у фото выставить width: 30%, тоже там inline в блоках повыставлять, и поработать с отсупами.
Спустя 4 часа, 37 минут, 13 секунд (15.09.2011 - 22:20) redreem написал(а):
в общем итог получасового копания:
в стилях делаем стили:
стиль ul.pxs_slider li img - вообще удаляем.
далее в скрипте заменяем
на
если этого не сделать, то навигационные прямоугольники будут смещены, так как их позиция рассчитывается исходя из размера картинки, а мы картинку изменили.
думаю дальше разберетесь.
в стилях делаем стили:
ul.pxs_slider li div{
position:relative;
width:760px;
height:280px;
display:block;
margin:35px auto 0px auto;
-moz-box-shadow:0px 0px 7px #222;
-webkit-box-shadow:0px 0px 7px #222;
box-shadow:0px 0px 7px #222;
border: 8px solid transparent;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
ul.pxs_slider li div img{
width:500px;
height:280px;
border: 2px solid #111;
float:left;
display:inline;
}
ul.pxs_slider li div div{
margin:0;
margin-left:2px;
position:relative;
top:0;
left:0;
width:248px;
height:280px;
border: 2px solid #111;
float:left;
display:inline;
}
стиль ul.pxs_slider li img - вообще удаляем.
далее в скрипте заменяем
var position_nav = w_w/2 - one_image_w/2 + 3;
на
var position_nav = w_w/2 - 760/2 + 3;
если этого не сделать, то навигационные прямоугольники будут смещены, так как их позиция рассчитывается исходя из размера картинки, а мы картинку изменили.
думаю дальше разберетесь.
Спустя 11 часов, 57 минут, 46 секунд (16.09.2011 - 10:17) Stasonix написал(а):
мир не без добрых людей, остался бы я без дальней работы наверное, если бы не форум, только тут так хорошо помогают.
Спустя 4 часа, 2 минуты, 23 секунды (16.09.2011 - 14:20) Stasonix написал(а):
еще один маленький, но существенный вопросик, возможно ли этот блок, что с фото + инфа сделать резиновым, вполне хватит думаю вертикальной резинки, т.е. если высоту менять окна, то он стягивался или растягивался? Я тож пробовал так сделать, но работает только с 1-ой фоткой, остальные просто не выводит.
Спустя 32 минуты, 27 секунд (16.09.2011 - 14:52) redreem написал(а):
тогда надо переводить движок плага полностью на резинку. это чревато кучей времени и, скорее всего, - потерей некоторых визуальных красивостей, так как вид резинки чувствителен к бордерам, маргинам, паддингам. я бы енто дело не затевал.
Спустя 5 минут, 40 секунд (16.09.2011 - 14:58) Stasonix написал(а):
ну я тоже так подмуал и забил на эту идею.