<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Slideshow - mit Länderauswahl</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Sweet Thumbnails Preview Gallery with jQuery" />
<meta name="keywords" content="jquery, thumbnails preview, image gallery, sliding"/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="loader" class="loader"></div>
<div class="wrapper">
<div id="ps_container" class="ps_container">
<div class="ps_image_wrapper">
<!-- First initial image -->
<img src="wein_usa.jpg" alt="usa" />
</div>
<!-- Navigation items -->
<div class="ps_next"><img src="next.jpg" width="20" height="59" alt="next" /></div>
<div class="ps_prev"><img src="prev.jpg" width="20" height="59" alt="back" /></div>
<!-- Dot list with thumbnail preview -->
<ul class="ps_nav">
<li>
<a href="wein_usa.jpg" rel="1.jpg">USA</a>
<img src="t_usa.jpg" alt="t_usa" width="40" height="35" border="0" id="t_usa" />
</li>
<li>
<a href="wein_australien.jpg" rel="2.jpg">Australien</a>
<img src="t_australien.jpg" width="40" height="35" alt="t_australien" border="0" />
</li>
<li>
<a href="wein_deutschland.jpg" rel="3.jpg">Deutschland</a>
<img src="t_deutsch.jpg" width="40" height="35" alt="t_deutschland" border="0" />
</li>
<li>
<a href="wein_frankreich.jpg" rel="4.jpg">Frankreich</a>
<img src="t_frankreich.jpg" width="40" height="35" alt="t_frankreich" border="0" />
</li>
<li>
<a href="wein_italien.jpg" rel="5.jpg">Italien</a>
<img src="t_italien.jpg" width="40" height="35" alt="t_italien" border="0" />
</li>
<li>
<a href="wein_spanien.jpg" rel="6.jpg">Spanien</a>
<img src="t_spanien.jpg" width="40" height="35" alt="t_spanien" border="0" />
</li>
<li>
<a href="wein_portugal.jpg" rel="7.jpg">Portugal</a>
<img src="t_portugal.jpg" width="40" height="35" alt="t_portugal" border="0" />
</li>
<li>
<a href="wein_afrika.jpg" rel="8.jpg">Afrika</a>
<img src="t_afrika.jpg" width="40" height="35" alt="t_afrika" border="0" />
</li>
<li>
<a href="wein_oesterreich.jpg" rel="9.jpg">Österreich</a>
<img src="t_oesterreich.jpg" width="40" height="35" alt="t_oesterreich" border="0" />
</li>
<li class="ps_preview">
<div class="ps_preview_wrapper">
</div>
</li>
</ul>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
/*
the images preload plugin
*/
(function($) {
$.fn.preload = function(options) {
var opts = $.extend({}, $.fn.preload.defaults, options),
o = $.meta ? $.extend({}, opts, this.data()) : opts;
return this.each(function() {
var $e = $(this),
t = $e.attr('rel'),
i = $e.attr('href'),
l = 0;
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',i);
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',t);
});
};
$.fn.preload.defaults = {
onComplete : function(){return false;}
};
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');
/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();
/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
onComplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showTooltip)
.bind('mouseleave',hideTooltip)
.bind('click',showImage);
//navigate through the images
$ps_next.bind('click',nextImage);
$ps_prev.bind('click',prevImage);
}
}
});
});
function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageLeft;
//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 100;
}
else{
imageLeft = -100;
}
}
currentHovered = idx;
//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')
.attr('src',$thumb);
//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();
//prepend the new image
$ps_preview_wrapper.prepend($newImage);
var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;
//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageLeft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageLeft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}
function hideTooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}
function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();
//if we click the current one return
if(current == idx) return false;
//add class selected to the current page / dot
$links.eq(current).removeClass('selected');
$link.addClass('selected');
//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
.attr('src',$image);
//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();
//prepend the new image
$ps_image_wrapper.prepend($newImage);
//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();
//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newImageWidth + 'px'
},350);
//animate the new image in
$newImage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentImage.stop().animate({
left : -currentImageWidth + 'px'
},350);
e.preventDefault();
}
function nextImage(){
if(current < total_images){
$links.eq(current+1).trigger('click');
}
}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
});
</script>
</body>
</html> | 
19.06.2013 - 02:59 - 10 Replies
28.03.2013 -