Всем привет!
Нужна помощь. я новичок в javascript и jquery
Есть скрипт PHP, который берет из базы информацию и URL до изображений, а также слайдер на CSS + javascript(jquery)
меня все устраивает, единственное хотелось бы сделать так, чтобы при прокрутке (нажатии на картинку-курсор) изображения подгружались постепенно, а не все сразу... хочется сократить трафик
как это можно реализовать?
CSS:
Код:
|
<style>
#wrapper-sl {
width: 100%;
}
#slider {
position: relative;
border: 1px solid #ccc;
width: 100%;
}
.scroll {
overflow: hidden;
width: 100%;
position: relative;
height:230px;
* height:210px;
height:210px\9;
}
.scrollContainer {
position: relative;
}
.scrollContainer div.panel {
width: 195px;
}
.inside {
display: none;
background: #fff;
font: 11px/1.5 tahoma, serif;
color: #036;
padding: 20px;
* padding: 0 0 20px 0;
padding: 0 0 20px 0\9;
height: 190px;
border: 1px solid #E0DED6;
}
.inside img {
display: block;
/* width: 150px; */
}
.inside img:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
.inside h2 {
font-weight: normal;
color: #111;
font-size: 12px;
}
.inside p {
font-size: 11px;
color: #ccc;
}
.inside a {
color: #000;
text-decoration: none;
border-bottom: 0px dotted #ccc;
}
.scrollButtons {
position: absolute;
top: 100px;
cursor: pointer;
}
.scrollButtons.left {
left: -12px;
}
.scrollButtons.right {
right: -12px;
}
.hide {
display: none;
}
/*Hintbox block*/
.jslideblock.hover div[class="jslidebox"] {display: block;}
.jslideblock a {color: #999999; border-bottom:1px dotted #CCCCCC; text-decoration:none; font-size: 11px;}
.jslideblock b a {color: #131313; font-size: 13px; font-family:Arial,Helvetica,Geneva,sans-serif;}
.jslidebox {
display: none;
position: absolute;
z-index: 3;
right: 0px;
top: 0px;
padding:10px;
border: 1px solid #ccc;
background: #fff;
font-size: 12px;
}
.jslidebox p {color: #131313; background: #F5F5F5; margin: -9px -9px 10px -9px; padding: 5px 9px; font-size: 12px; font-family:Arial,Helvetica,Geneva,sans-serif;}
.jslidebox p:first-child { margin-bottom: 0;}
</style> |
HTML:
Код:
|
<div id="wrapper-sl">
<div id="slider">
<img class="scrollButtons left" src="{THEME}/images/leftarrow.png" />
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
{posts}
</div>
</div>
<img class="scrollButtons right" src="{THEME}/images/rightarrow.png" />
</div>
</div> |
posts это тоже HTML, но генериться в PHP
posts:
Код:
|
<div class="panel" id="panel_{rank}">
<div class="inside"><a href="{href}">
<img src="{image}" alt="" title="{title}" /></a>
<a href="{href}">{title}</a>
</div>
</div> |
JS скрипт
$(function() {
var totalPanels = $(".scrollContainer").children().size();
var movingStep = 1;
var movingDistance = movingStep * 195;
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
$panels.css({'float' : 'left','position' : 'relative'});
$("#slider").data("currentlyMoving", false);
$container
.css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
.css('left', "0px");
var scroll = $('#slider .scroll').css('overflow', 'hidden');
//direction true = right, false = left
function change(direction) {
//if not at the first or last panel
if((direction && !(curPanel < totalPanels - 3)) || (!direction && (curPanel <= 1))) { return false; }
//if not currently moving
if (($("#slider").data("currentlyMoving") == false)) {
$("#slider").data("currentlyMoving", true);
var next = direction ? curPanel + 1 : curPanel - 1;
var leftValue = $(".scrollContainer").css("left");
// alert (leftValue);
var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
$(".scrollContainer")
.stop()
.animate({
"left": movement
}, function() {
$("#slider").data("currentlyMoving", false);
});
curPanel = next;
//remove all previous bound functions
$("#panel_"+(curPanel+1)).unbind();
//go forward
$("#panel_"+(curPanel+1)).click(function(){ change(true); });
//remove all previous bound functions
$("#panel_"+(curPanel-1)).unbind();
//go back
$("#panel_"+(curPanel-1)).click(function(){ change(false); });
//remove all previous bound functions
$("#panel_"+curPanel).unbind();
}
}
// Set up "Current" panel and next and prev
var curPanel = 1;
//$("#panel_"+(curPanel+1)).click(function(){ change(true); });
//$("#panel_"+(curPanel-1)).click(function(){ change(false); });
//when the left/right arrows are clicked
$(".right").click(function(){ change(true); });
$(".left").click(function(){
change(false);
});
//autoscroll
//setInterval("$('.right').click()", 2000);
});