jquery SlidesShow

jQuery slideshow plugin // Marcel Eichner // Ephigenia

/* general styles, can be ignored */
body {
font-family: Georgia, 'Times New Roman', Arial, Verdana;
font-size: 100.01%;
line-height: 1.5em;
margin: 0px;
padding: 0px;
background-color: #F4F4F4;
}
#app {
-webkit-box-shadow: #CDCDCD 0px 0px 35px;
-moz-box-shadow: 0px 0px 35px #CDCDCD;
-khtml-box-shadow: 0px 0px 35px #CDCDCD;
width: 620px;
margin: 0px auto;
background-color: #ffffff;
padding: 10px 20px;
}
a {
color: #21759B;
}
h1 {
line-height: 1.2em;
border-bottom: 3px solid #323232;
}
h3 {
margin: 1em 0em 0.2em 0em;
}
p {
margin: 0em 0em 0.2em 0em;
padding: 0px;
}
code {
background-color: #FFFBDF;
padding: 8px 5px;
border: 1px solid #A99862;
display: block;
overflow: auto;
white-space:pre;
margin: 0em 0em 1em 0em;
}
.faded, .faded a {
color: #B2B2B2 !important;
}

#news li, #news{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#news li .time {
font-weight: bold;
display: block;
}

/* slideshow styles */
.slideShow ul, .slideShow li {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.slideShow {
padding: 10px; border: 1px solid #B3B3B3; display: table;
clear: both;
margin-bottom: 10px;
}
.slideShow .navigation {
margin-top: 10px;
clear: left;
display: block;
}
.slideShow .navigation li {
display: inline;
}
.slideShow .navigation a {
background-color: #B3B3B3;
margin: 0px 2px 0px 0px;
padding: 3px 8px;
color: #232323;
display: inline-block;
text-decoration: none;
font-size: 0.8em;
}
.slideShow ul.topNavigation {
margin: 0px 0px 40px 0px;
}
.slideShow .navigation a:hover, .slideShow .navigation a.selected {
background-color: #929292;
color: #000000;
}

/** slides with more than an image in it **/
.slide img {
position: absolute;
}
.slide h1 {
position: absolute;
background-color: #ffffff;
left: 0px;
top: 0px;
}

/** slides with text over images **/
.slide p {
margin: 1em;
position: absolute;
background-color: #000;
color: #fff;
z-index: 1000;
padding: 0.2em 0.8em;
}
.slide p a {
color: #fff;
}

/** slideshow with images in navigation **/
.navigation.white a, .navigation.white li {
background-color: #ffffff;
}
.navigation.white a {
border: 1px solid #ffffff;
padding: 0px;
line-height: 0.8em;
}
.navigation.white a:hover, .navigation.white a.selected {
background-color: #ffffff;
border: 1px solid #999;
}

$(document).ready(function() {
// simplest example
$('.simpleSlideShow, .slideShowTopNavi').slideShow({
interval: 3
});
// slideshow with mouse hover
$('.useMouseSlideShow').slideShow({
hoverNavigation: true,
interval: false
});
// slideshow with images
$('.imageNavigation').slideShow({
interval: 3
});
// random slideshow
$('.randomSlideShow').slideShow({
interval: 3,
start: 'random'
});

// slideshow with play/pause
var slideShow = $('.playPauseExample').slideShow({
interval: 0.7
});
// now add logic to play/pause button
$('.playPauseExample a.togglePlayback').click(function() {
if (slideShow.isPlaying()) {
$(this).html('play');
} else {
$(this).html('stop');
}
slideShow.togglePlayback();
});

// slideshow with callback
$('.callbackSlideShow').slideShow({
interval: 3,
slideClick: function(slideShow) {
if (slideShow.mouse.x > slideShow.options.slideSize.width / 2) {
slideShow.next();
} else {
slideShow.previous();
}
},
gotoSlide: function(slideShow, index) {
$('.callBackSlideShowLog').html('goto slide index: ' + index);
}
});
});

document.getElementById("divSlides").innerHTML=getImages();
document.getElementById("divThumbsSlides").innerHTML=getThumbsImages();
// get all images in source img
function getImages(){
// Code here
var i=1;
var strHTML="";
var Pic = new Array();
while (i<=4)
{
Pic[i] = "

  • ";
    strHTML+=Pic[i];
    i++;
    }
    return strHTML;
    }
    function getThumbsImages(){
    // Code here
    var i=1;
    var strHTML="";
    strHTML+="

  • ";
    var Pic = new Array();
    while (i<=4)
    {
    Pic[i] = "

  • ";
    strHTML+=Pic[i];
    i++;
    }
    strHTML+="

  • ";
    return strHTML;
    }

    Leave a Reply

    Please log in using one of these methods to post your comment:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: