intermedia :: Internetagentur, jQuery Gallery Slider Plugin von Jürgen Koller (kollermedia.at).
Der jQuery Gallery Slider von Jürgen Koller (kollermedia.at) ist ein kleines jQuery Plugin (<1 kB) um mit einer unbegrenzten Anzahl von Bildern (Empfehlung max. 10-15 Fotos, Abbildungsgröße 1600px x 1200px bei 72 dpi Bildschirmauflösung) eine Diashow im Vollbildmodus zu realisieren. Die einzelnen Fotos werden dabei per Mausbewegung nach unten bzw. oben bewegt. Das Browserfenster kann beliebig in der Größe verändert werden - die Bilder skalieren sich automatisch. Sie können natürlich auch eine feste Größe für Ihre Bilder festlegen – so z.B. in den Einheiten px, % oder em.
Kompatibilität
Getestet mit: IE6, IE7, IE8, aktuellste Chrome, Opera, Safari and Firefox Versionen.
Demo
Demo1 mit 10 großen Bildern (Einstellungen: width=100%, raster=true)
Demo2 mit Bildern fester Größe (Einstellungen: width=400px, raster=false)
So wird es gemacht:
<style type="text/css" media="screen"><!--
* {margin:0; padding:0;}
body {background:#000000; height:100%; width:100%;}
#gallery {position:relative; margin:0 auto; cursor:n-resize;}
#gallery img {width:100%; display:block;}
#gallery span{position:absolute; z-index:1; height:100%; width:100%; overflow:hidden; display:block; background:url(img/raster.png) repeat;}
*html #gallery span {display:none;} /*hide png raster from ie6*/
--></style>
Auslagern in eine separate CSS-Datei geht natürlich auch!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
<!-- hide this script from non-javascript-enabled browsers
/*
* jQuery Gallery Slider Plugin 1.0
*
* Download and Infos:
* http://www.kollermedia.at/archive/2009/06/06/jquery-gallery-slider-plugin
*
* Copyright (c) Jürgen Koller [Kollermedia.at]
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
(function($){
$.fn.galleryslider = function(options) {
var defaults = {
width: "100%",
raster: true
};
var options = $.extend(defaults, options);
$('html').css("overflow", "hidden"); //hide scrollbars if js is active
return this.each(function() {
obj = $(this);
if (options.raster==true) {obj.prepend("<span></span>");}
obj.css("width",options.width); //set width from option
obj.mousemove(function(e){
var galleryheight = $(this).height(); //gallery height
var windowheight = $(window).height(); //browser window height
scrollto = Math.round((galleryheight-$(window).height())*e.pageY/($(window).height())); //scroll calculation
obj.animate({top: -scrollto}, {queue:false, duration:0}); //scroll it
});
});
};
})(jQuery);
$(window).bind("resize", function(){
obj.animate({top:0}, {queue:false, duration:0}); //set gallery to top if resized
});
// stop hiding -->
</script>
Auslagern in eine separate Javascript-Datei geht natürlich auch!
Für die Darstellung der Bilder im Vollbildmodus:
<script type="text/javascript">
$().ready(function() {
$('#gallery').galleryslider({width:"100%", raster:true}); //width in px % or em | raster: true or false
});
</script>
Für die Darstellung der Bilder in einer bestimmten Größe (hier Bildbreite 400 Pixel):
<script type="text/javascript">
$().ready(function() {
$('#gallery').galleryslider({width:"400px", raster:false}); //width in px % or em | raster: true or false
});
</script>
<div id="gallery">
<img src="Ihr_Bilderordner/01.jpg" alt="" />
<img src="Ihr_Bilderordner/02.jpg" alt="" />
<img src="Ihr_Bilderordner/03.jpg" alt="" />
<img src="Ihr_Bilderordner/04.jpg" alt="" />
<img src="Ihr_Bilderordner/05.jpg" alt="" />
<img src="Ihr_Bilderordner/06.jpg" alt="" />
<img src="Ihr_Bilderordner/07.jpg" alt="" />
<img src="Ihr_Bilderordner/08.jpg" alt="" />
<img src="Ihr_Bilderordner/09.jpg" alt="" />
<img src="Ihr_Bilderordner/10.jpg" alt="" />
</div>
Die Installation und Verwendung der Software erfolgt auf eigene Gefahr! Wir übernehmen keine Gewährleistung oder Haftung für etwaige Schäden oder Ausfälle, die entstehen können.
