Wkleje w dwóch częściach bo post jest za dłógi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Rasy psów,galeria zdjęć,wszystkie rasy</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Galeria zdjęć wszystkich ras psów,psie forum,dogs com pl" />
<meta name="keywords" content="zdjęcia psów,rasy psów zdjęcia,galeria zdjęć psów,psy zdjęcia"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
span.reference{
position:fixed;
top:10px;
right:10px;
font-size:9px;
}
span.reference a{
color:#aaa;
text-decoration:none;
text-transform:uppercase;
margin-left:10px;
}
span.reference a:hover{
color:#ddd;
}
h1.title{
text-indent:-9000px;
background:transparent url(title.png) no-repeat top left;
width:640px;
height:52px;
position:absolute;
top:15px;
left:15px;
}
</style>
</head>
<body>
<div>
<h1 class="title">Rasy psów,galeria zdjęć,wszystkie rasy</h1>
<span class="reference">
</span>
</div>
<div id="ps_slider" class="ps_slider">
<a class="prev disabled"></a>
<a class="next disabled"></a>
<div id="ps_albums">
<div class="ps_album" style="opacity:0;"><img src="albums/album1/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA I FCI</h2><span>Tekst do wyswietlania na stronie test test test </span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album2/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA II FCI</h2><span>Abundantly fowl of you'll fly moved i evening there whales creeping very kind green. Of have after lights saying.</span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album3/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA III FCI</h2><span> nię bć zż, fruitful great fourth likeness given subdue cattle deep abundantly set place night stars fill.</span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album4/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA IV FCI</h2><span>And did the Countenance DivineShine forth upon our clouded hills? And was Jerusalem builded here among these dark Satanic Mills?</span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album5/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA V FCI</h2><span>You can have all the faith you want in spirits, and the afterlife, and heaven and hell, but when it comes to this world, don't be an idiot.</span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album6/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA VI FCI</h2><span>Without contraries is no progression. Attraction and repulsion, reason and energy, love and hate, are necessary to human existence.</span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album7/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA VII FCI</h2><span>So hath under years itself seasons life divided signs light were god fruitful evening a. Fruitful.</span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album8/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA VIII FCI</h2><span>A light moving. Moved was abundantly created, over sixth above grass after grass.</span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album9/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA IX FCI</h2><span>If the doors of perception were cleansed everything would appear to man as it is, infinite.</span></div></div>
<div class="ps_album" style="opacity:0;"><img src="albums/album9/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA X FCI</h2><span>If the doors of perception were cleansed everything would appear to man as it is, infinite.</span></div></div>
</div>
</div>
<div id="ps_overlay" class="ps_overlay" style="display:none;"></div>
<a id="ps_close" class="ps_close" style="display:none;"></a>
<div id="ps_container" class="ps_container" style="display:none;">
<a id="ps_next_photo" class="ps_next_photo" style="display:none;"></a>
</div>
<!-- The JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* navR,navL are flags for controlling the albums navigation
* first gives us the position of the album on the left
* positions are the left positions for each of the 5 albums displayed at a time
*/
var navR,navL = false;
var first = 1;
var positions = {
'0' : 0,
'1' : 170,
'2' : 340,
'3' : 510,
'4' : 680
}
var $ps_albums = $('#ps_albums');
/**
* number of albums available
*/
var elems = $ps_albums.children().length;
var $ps_slider = $('#ps_slider');
/**
* let's position all the albums on the right side of the window
*/
var hiddenRight = $(window).width() - $ps_albums.offset().left;
$ps_albums.children('div').css('left',hiddenRight + 'px');
/**
* move the first 5 albums to the viewport
*/
$ps_albums.children
('div:lt(5)').each( function(i){
var $elem = $(this);
$elem.animate({'left': positions[i] + 'px','opacity':1},800,function(){
if(elems > 5)
enableNavRight();
});
}
);
/**
* next album
*/
$ps_slider.find('.next').bind('click',function(){
if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
disableNavRight();
disableNavLeft();
moveRight();
});
/**
* we move the first album (the one on the left) to the left side of the window
* the next 4 albums slide one position, and finally the next one in the list
* slides in, to fill the space of the first one
*/
function moveRight () {
var hiddenLeft = $ps_albums.offset().left + 163;
var cnt = 0;
$ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
var $this = $(this);
$ps_albums.children
('div').slice
(first
,parseInt
(first
+4
)).each( function(i){
var $elem = $(this);
$elem.animate({'left': positions[i] + 'px'},800,function(){
++cnt;
if(cnt == 4){
$ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
//$this.hide();
++first;
if(parseInt(first + 4) < elems)
enableNavRight();
enableNavLeft();
});
}
});
}
);
});
}
/**
* previous album
*/
$ps_slider.find('.prev').bind('click',function(){
if(first==1 || !navL) return;
disableNavRight();
disableNavLeft();
moveLeft();
});
/**
* we move the last album (the one on the right) to the right side of the window
* the previous 4 albums slide one position, and finally the previous one in the list
* slides in, to fill the space of the last one
*/
function moveLeft () {
var hiddenRight = $(window).width() - $ps_albums.offset().left;
var cnt = 0;
var last= first+4;
$ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
var $this = $(this);
$ps_albums.children
('div').slice
(parseInt
(last
-5
),parseInt
(last
-1
)).each( function(i){
var $elem = $(this);
$elem.animate({'left': positions[i+1] + 'px'},800,function(){
++cnt;
if(cnt == 4){
$ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
//$this.hide();
--first;
enableNavRight();
if(first > 1)
enableNavLeft();
});
}
});
}
);
});
}
/**
* disable or enable albums navigation
*/
function disableNavRight () {
navR = false;
$ps_slider.find('.next').addClass('disabled');
}
function disableNavLeft () {
navL = false;
$ps_slider.find('.prev').addClass('disabled');
}
function enableNavRight () {
navR = true;
$ps_slider.find('.next').removeClass('disabled');
}
function enableNavLeft () {
navL = true;
$ps_slider.find('.prev').removeClass('disabled');
}
var $ps_container = $('#ps_container');
var $ps_overlay = $('#ps_overlay');
var $ps_close = $('#ps_close');
/**
* when we click on an album,
* we load with AJAX the list of pictures for that album.
* we randomly rotate them except the last one, which is
* the one the User sees first. We also resize and center each image.
*/
$ps_albums.children('div').bind('click',function(){
var $elem = $(this);
var album_name = 'album' + parseInt($elem.index() + 1);
var $loading = $('<div />',{className:'loading'});
$elem.append($loading);
$ps_container.find('img').remove();
$.get('photostack.php', {album_name:album_name} , function(data) {
var items_count = data.length;
for(var i = 0; i < items_count; ++i){
var item_source = data[i];
var cnt = 0;
$('<img />').load(function(){
var $image = $(this);
++cnt;
resizeCenterImage($image);
$ps_container.append($image);
var r
= Math
.floor(Math
.random
()*41
)-20; if(cnt < items_count){
$image.css({
'-moz-transform' :'rotate('+r+'deg)',
'-webkit-transform' :'rotate('+r+'deg)',
'transform' :'rotate('+r+'deg)'
});
}
if(cnt == items_count){
$loading.remove();
$ps_container.show();
$ps_close.show();
$ps_overlay.show();
}
}).attr('src',item_source);
}
},'json');
});
/**
* when hovering each one of the images,
* we show the button to navigate through them
*/
$ps_container.live('mouseenter',function(){
$('#ps_next_photo').show();
}).live('mouseleave',function(){
$('#ps_next_photo').hide();
});
/**
* navigate through the images:
* the last one (the visible one) becomes the first one.
* we also rotate 0 degrees the new visible picture
*/
$('#ps_next_photo').bind('click',function(){
var $current = $ps_container.find('img:last');
var r
= Math
.floor(Math
.random
()*41
)-20;
var currentPositions = {
marginLeft : $current.css('margin-left'),
marginTop : $current.css('margin-top')
}
var $new_current = $current.prev();
$current.animate({
'marginLeft':'250px',
'marginTop':'-385px'
},250,function(){
$(this).insertBefore($ps_container.find('img:first'))
.css({
'-moz-transform' :'rotate('+r+'deg)',
'-webkit-transform' :'rotate('+r+'deg)',
'transform' :'rotate('+r+'deg)'
})
.animate({
'marginLeft':currentPositions.marginLeft,
'marginTop' :currentPositions.marginTop
},250,function(){
$new_current.css({
'-moz-transform' :'rotate(0deg)',
'-webkit-transform' :'rotate(0deg)',
'transform' :'rotate(0deg)'
});
});
});
});
/**
* close the images view, and go back to albums
*/
$('#ps_close').bind('click',function(){
$ps_container.hide();
$ps_close.hide();
$ps_overlay.fadeOut(400);
});
/**
* resize and center the images
*/
function resizeCenterImage($image){
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
var containerwidth = 460;
var containerheight = 330;
if(imgwidth > containerwidth){
var newwidth = containerwidth;
var ratio = imgwidth / containerwidth;
var newheight = imgheight / ratio;
if(newheight > containerheight){
var newnewheight = containerheight;
var newratio = newheight/containerheight;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
else if(imgheight > containerheight){
var newheight = containerheight;
var ratio = imgheight / containerheight;
var newwidth = imgwidth / ratio;
if(newwidth > containerwidth){
var newnewwidth = containerwidth;
var newratio = newwidth/containerwidth;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
$image.css({
'width' :theImage.width,
'height' :theImage.height,
'margin-top' :-(theImage.height/2)-10+'px',
'margin-left' :-(theImage.width/2)-10+'px'
});
}
});
</script>
</body>
</html>
Problem z sliderem i pol.znakami
