Blog Entry

Javascript Image Slider Posted on May 1, 2007

Es ist immer wieder interessant was man so alles findet beim durchstöbern der alten Verzeichnisse. Hier eine Javascript Image Slideshow die ich 2003 programmiert habe, funktioniert mit allen gängigen Browser (incl. IE6). Ein Preview gibt es hier.

Da die Fotos praktisch nacheinander "eingehängt" werden ist die Anzahl verschiedener Fotos fast unbegrenzt. Interessant wäre noch eine Integration mit Google Picasa oder Flickr, das wird vielleicht demnächst nachgeholt ,-)

Update 16.03.2009: Ich habe das Script nun aktualisiert. Die Installation ist einfacher da die Liste mit Bildern automatisch mit PHP generiert und per JSON eingebunden wird. Es muss jetzt nur noch der Pfad zum Verzeichnis mit den Fotos anzugeben werden. Die Vorschaubilder speichert man im Unterverzeichnis thumbs.

HTML Code (index.html): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Thinking Sliders</title>
    <link href="slider.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="JavaScript1.2" src="get_images.php"></script>
    <script type="text/javascript" language="JavaScript1.2" src="sliders2.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>

<body>
    <div id="slider"></div>
    <div id="fullsize"></div>
</body>

</html>

PHP Script (get_images.php) das die Liste mit Fotos generiert und als JSON Array ausgibt. Die Variable $path gibt den relativen Pfad zum Verzeichnis der Fotos an. In diesen Verzeichnis muss ein Oder thumbs erstellt werden, dort speichert man die kleineren Fotos (120x90 Pixel). Tip: Es gibt viele Freeware Programme die solche Thumbnails automatisch erstellen. 

<?php
// get_images.php
$path = 'img';
$abs_path = getcwd().DIRECTORY_SEPARATOR.$path;
chdir($abs_path);
$images = glob("*.[Jj][Pp][Gg]",GLOB_MARK | GLOB_ERR);

echo "eval('var json_obj = ".json_encode(Array(
    'path' => $path,
    'images' => $images
))."')";
?>

Und hier der CSS Code (slider.css). Dieser lässt sich leicht an das Design der Webseite anpassen: 

body {
    margin: 40px 0px 20px 0px;
    color: white;
    background-color: black;
}

#slider {
    position:absolute;
    top: 40px;
    left: 40px;
    /*clip:rect(0px 612px 92px 121px);*/
    background-color: silver;
    /*border: 2px solid yell;*/
    cursor: pointer;
    padding: 0px;
    margin: 0px;
    z-index: 9;
}

#fullsize {
    position:absolute;
    top: 140px;
    left: 40px;
    width: 730px;
    height: 600px;
    /*clip:rect(0px 612px 92px 121px);*/
    background-image: url('img/pict0176.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    border: 2px solid silver;
    padding: 0px;
    margin: 0px;
}

img.lab {
    /*float: left;*/
    padding: 0px;
    margin: 1px;
}

Zuletzt das Javascript (sliders2.1.js): 

/* ---------------  sliders2.1.js -------------------
    | 16.03.2009 by Werner Hartnagel |
    ----------------------------------------------------*/

var slider, timerID, img_path
speed = 130
var w = 120
var h = 90
var lw = w
var rw = 0

function init() {
    var tmp
    slider = document.getElementById('slider')
    img_path = json_obj['path']
    for (i=0; i<=6; i++) {
        tmp = document.createElement("img")
        tmp.setAttribute("src", img_path+'/thumbs/'+json_obj['images'][i])
        tmp.setAttribute("width", w)
        tmp.setAttribute("height", h)
        tmp.setAttribute("class", "lab")
        slider.appendChild(tmp)
        addEvent(tmp, "click", pictureClick, false)
    }
    smallerFirst()
}

function pictureClick(evt) {
    var img_name = evt.target.src
    var fullsize = img_name.substr(img_name.lastIndexOf("/thumbs/")+7)
    document.getElementById('fullsize').style.backgroundImage = "url("+ img_path + fullsize + ")"
}

function swapImages() {
    var removed = slider.removeChild(slider.firstChild)
    slider.appendChild(removed)
}

function smallerFirst() {
    if (lw >= 4) {
        lw -= 4
        rw += 4
        slider.firstChild.style.width = lw + "px"
        slider.lastChild.style.width = rw + "px"
    } else {
        lw = w
        rw = 0
        swapImages()
    }
    timerID = window.setTimeout("smallerFirst()", speed)
}

function changeHandler() {
    images.push(images.shift())
    setImages()
}

function stopHandler() {
    window.clearInterval(iTimerID)
}

/* ################################################
    wrapper functions for diffrent Browsers
   ################################################ */

function addEvent(obj, evType, fn, useCapture) {
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, useCapture)
        return true
    } else if (obj.attachEvent) {
        var r = obj.attachEvent("on"+evType, fn)
        return r
    } else {
        alert("Handler could not be attached")
    }
}

function removeEvent(obj, evType, fn, useCapture) {
    if (obj.removeEventListener) {
        obj.removeEventListener(evType, fn, useCapture)
        return true
    } else if (obj.detachEvent){
        var r = obj.detachEvent("on"+evType, fn)
        return r
    } else {
        alert("Handler could not be removed")
    }
}

window.onload = init
Bookmark and Share

Tags: Javascript, CSS, xhtml | View Comments

Comments

blog comments powered by Disqus

Resize text: A A A