Skip to content
This repository was archived by the owner on Jul 19, 2020. It is now read-only.

added onload slide images #9

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

added onload slide images #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f1cb507
new jquery file for dynamic value
sanooj Sep 19, 2011
48f713c
new html file for dynamic value
sanooj Sep 19, 2011
8a3fd0f
new loader image
sanooj Sep 19, 2011
627ffee
updated css file
sanooj Sep 19, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion examples/css/slideshow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,14 @@
clear: both;
margin-bottom: 10px;
}

.dynamic li
{ text-align:center;
height:256px !important; /* Fixed height for slider */
width:600px !important; /* Fixed width for slider */
}
.loader
{ margin-top:17%;
}
/** navigation **/
.slideShow .navigation {
margin: 5px 0px 0px 0px;
Expand Down
40 changes: 40 additions & 0 deletions examples/dynamic_image_slide.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!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" lang="de">
<head>
<title>jQuery slideshow plugin Examples // Marcel Eichner // Ephigenia</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="jQuery.slideshow, slideshow Plugin, jquery slideshow plugin, simple plugin, easy slideshow, slideshow callback, jquery gallery, javascript slideshow" />
<meta name="robots" content="index, follow" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../src/jquery.onload.slideshow.js"></script>
</head>
<body>
<div id="app">
<h1>jQuery.slideShow</h1>
<h2>Navigation Position</h2>
<div class="slideShow">
<ol class="navigation topNavigation">
<li><a href="javascript:void(0);" class="page">1</a></li>
<li><a href="javascript:void(0);" class="page">2</a></li>
<li><a href="javascript:void(0);" class="page">3</a></li>
<li><a href="javascript:void(0);" class="page">4</a></li>
</ol>
<ul class="slides dynamic">
<li class="slide" data-href="img/1.jpg"><img src="img/image-loader.gif" border="0" alt="" class="loader" /></li>
<li class="slide" data-href="img/2.jpg"><img src="img/image-loader.gif" border="0" alt="" class="loader" /></li>
<li class="slide" data-href="img/3.jpg"><img src="img/image-loader.gif" border="0" alt="" class="loader" /></li>
<li class="slide" data-href="img/4.jpg"><img src="img/image-loader.gif" border="0" alt="" class="loader" /></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
// simplest example
$('.slideShow').slideShow({
interval: 3
});
});
</script>
</div>
</div>
Binary file added examples/img/image-loader.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
324 changes: 324 additions & 0 deletions src/jquery.onload.slideshow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,324 @@
/**
* jquery.slideShow (1.0.7)
* by Marcel Eichner (www.marceleichner.de) <[email protected]>
* and charles kline <[email protected]>
*
* This simple slideshow plugin will provide your effect gallery with
* some simple features:
*
* - auto slideshow with repeat and a lot of options
* - callback for slide changing (gotoSlide) and slide Clicks (onSlideClick)
* - different option variables to configure
* - change of slide through clicking numbers, next, prev etc and mouse
* movement over the slides
* - text over images possible
* - random start slide via { start: 'rnd' }
* - start/stop slideshow and read playing status
*
* learn more about this plugin and other projects at:
* http://code.marceleichner.de/project/jquery.slideShow/
*
* Copyright (c) 2009 Marcel Eichner (www.marceleichner.de)
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* NOTE: This script requires jQuery to work. Download jQuery at www.jquery.com
*/
(function($){

$.fn.slideShow = function(options) {

// multiple elements
if (this.length > 1) {
this.each(function() { $(this).slideShow(options)});
return this;
}

// private vars
this.defaults = {
start: 0, // start index, set to 'random' or 'rnd' to random start
interval: 3, // interval, autoplay, set to false for no auto-play, in seconds
repeat: true, // repeat at the end
transition: {
mode: 'fade',
speed: 1000
},
slideSize: 'auto', // size for slides (used for mouseover and stuff)
hoverNavigation:false, // enable mouse to change images
slideClick: false, // insert callback method for slide clicks
gotoSlide: false, // slide change callback
mousePause: false // set to true to stop animation on mouse hover
};
this.options = $.extend({}, this.defaults, options);

// internal vars
this.numSlides = this.find('.slide').length;
if (this.options.start == 'random' || this.options.start == 'rnd') {
this.current = Math.floor(Math.random() * this.numSlides) + 1;
} else {
this.current = this.options.start;
}
if (this.current >= this.numSlides) {
this.current = this.numSlides - 1;
}
this.last = false;
this.elm = $(this);
this.interval = false;
this.mouse = {
x: 0, // store mouse x relative position on element
y: 0, // store mouse y relative position on element
over: false // store mouse over boolena value
};

// init slideshow
this.init = function() {

// set slide container to correct width and height
if (this.find('.slides').length) {
// auto-detect slide size
if (this.options.slideSize == 'auto') {
this.options.slideSize = {
width: this.find('.slide:first img').width(),
height: this.find('.slide:first img').height()
};
}

// don't set size of slides and slide container if not needed
if (this.options.slideSize != 'none' && this.options.slideSize != false) {
this.find('.slides').css({
height: this.options.slideSize.height + 'px',
width: this.options.slideSize.width + 'px',
overflow: 'hidden'
});
}
}

// set slides to be positioned absolute
this.find('.slide').css('position', 'absolute');
// hide slides if not hidden allready
this.find('.slide:not(:eq(' + this.current + '))').hide();

// navigation shortcuts
this.find('.first, .next, .prev, .last, .navigation, .slide, .page, .slides').data('slideShow', this);
this.find('.first').click(this.first);
this.find('.next').click(this.next);
this.find('.prev').click(this.previous);
this.find('.last').click(this.last);

// init pagínation buttons if available
this.find('.navigation .page:eq(' + this.current + ')').addClass('selected');
this.find('.page').click(function(e) {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
// determine position in navigation
var index = $(this).html();
if (!(index = parseInt($(this).html()-1))) {
var index = $(this).parents('.navigation').find('.page').index($(this));
}
e.preventDefault();
slideShow.gotoSlide(index);
});

// init mouse move handler
this.find('.slide').mousemove(function(event) {
var slideShow = $(this).data('slideShow');
// calculate mouse relative position and store it
slideShow.mouse.x = Math.abs(event.clientX - $(this).position().left);
slideShow.mouse.y = Math.abs(event.clientY - $(this).position().top);
if (slideShow.mouse.x > slideShow.options.slideSize.width) slideShow.mouse.x = slideShow.options.slideSize.width;
if (slideShow.mouse.y > slideShow.options.slideSize.height) slideShow.mouse.y = slideShow.options.slideSize.height;
// use mouse vor navigation, calculate new page from mouse position
if (slideShow.options.hoverNavigation) {
var index = Math.round((slideShow.numSlides - 1) * slideShow.mouse.x / slideShow.options.slideSize.width);
slideShow.gotoSlide(index, true);
}
});

// mouse enter handler
this.find('.slide').mouseenter(function() {
var slideShow = $(this).data('slideShow');
slideShow.mouse.over = true;
if (!slideShow.options.mousePause){ // added conditional for mouse pausing animation
slideShow.stopAuto();
}
});

// mouse leave handler
this.find('.slide').mouseleave(function() {
var slideShow = $(this).data('slideShow');
slideShow.mouse.over = false;
slideShow.auto();
});

// on click handler
if (typeof(this.options.slideClick) == 'function') {
this.find('.slide').click(function() {
var slideShow = $(this).data('slideShow');
slideShow.options.slideClick(slideShow);
});
}

var g = this.current;
this.current = -1;
this.gotoSlide(g);
// start interval for auto animation
if (this.options.interval > 0) {
this.auto();
}
return this;
};

// public methods
this.auto = function() {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
if (!slideShow.interval && slideShow.options.interval > 0.001) {
slideShow.interval = window.setInterval(function() {
slideShow.next();
}, slideShow.options.interval * 1000);
}
// image loading from data-href
var selectImg = this.find('.slide:eq(' + this.current +')').attr('data-href');
this.find('.slide:eq(' + this.current +')').find('img').attr('src',selectImg).removeClass('loader');
//var src = this.find('.slide:eq(' + this.current +')').html('<img src="'+ selectImg +'" border="0" alt="banner" />');
//alert(src);
return this;
}
// check if slideshow is running
this.isPlaying = function() {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
return slideShow.interval;
}
// stop/play slideshow automatic
this.togglePlayback = function() {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
if (slideShow.isPlaying()) {
slideShow.stopAuto();
} else {
slideShow.auto();
}
},
// stop automatic slideshow
this.stopAuto = function() {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
if (slideShow.interval) {
window.clearInterval(slideShow.interval);
slideShow.interval = false;
}
return this;
}
// goto first slide
this.first = function(elm) {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
return slideShow.gotoSlide(0);
};
// goto last slide
this.next = function() {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
return slideShow.gotoSlide(slideShow.current + 1);
};
this.previous = function() {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
return slideShow.gotoSlide(slideShow.current - 1);
};
this.last = function() {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
return slideShow.gotoSlide(slideShow.numSlides);
};
this.gotoSlide = function(index, noanimation) {
if (index < 0) {
index = this.numSlides - 1;
}
if (index >= this.numSlides) {
index = 0;
}
if (index === this.current) return this;
// get slide elements
var oldSlide = this.find('.slide:eq(' + this.current +')');
var newSlide = this.find('.slide:eq(' + index +')');
// callbacks for animation finished
var oldFinished = function () {
$(this).removeClass('selected');
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
slideShow.elm.find('.navigation .page:eq(' + slideShow.current + ')').addClass('selected');
if (!slideShow.mouse.over) {
slideShow.auto();
}
}
var newFinished = function() {
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
if (slideShow.current >= 0) {
slideShow.elm.find('.navigation .page:not(:eq(' + slideShow.current + '))').removeClass('selected');
}
$(this).addClass('selected');
}
// get slideshow
if (!(slideShow = $(this).data('slideShow'))) {
var slideShow = this;
}
slideShow.stopAuto();
// call callback
if (typeof(this.options.gotoSlide) == 'function') {
this.options.gotoSlide(slideShow, index);
}
// start transition
if (noanimation) {
oldSlide.hide(1, oldFinished);
newSlide.show(1, newFinished);
} else {
if (typeof(this.options.transition.mode) == 'function') {
this.call(this.options.transition.mode, newSlide, oldSlide);
} else {
switch(this.options.transition.mode) {
default:
case 'fade':
oldSlide.fadeOut(this.options.transition.speed, oldFinished);
newSlide.fadeIn(this.options.transition.speed, newFinished);
break;
case 'slide': // added by charles kline - [email protected]
if (this.current == -1) {
oldSlide.hide(0, oldFinished);
newSlide.show();
} else {
oldSlide.animate({},{});
oldSlide.animate({width: 'hide'}, this.options.transition.speed, oldFinished);
newSlide.animate({width: 'show'}, this.options.transition.speed, newFinished);
}
break;
}
}
}
// alter height of slides to new slide height
this.find('.slides').animate({
height: newSlide.height()
});

this.last = this.current;
this.current = index;
return this;
};

return this.init();
}

})(jQuery);