JavaScript - Need Help - Image Slideshow W/ Fading Images

I'm designing a page to fade multiple images (three) in and out over a set period of time (one minute, say). The code I have works as follows:
I define an array and fill it with the div objects I want to fade in and out.
I have some simple tags (2 for opaque, 1 for fading in, -1 for fading out, etc.) that I set to show the state of the object.
First I check if the object is opaque, and if so set it to fade along with a time;
Or if it's transparent I give it a 1 in 10 chance of fading in during this iteration.
If it's currently fading in or out I check to make sure it's on track and change the opacity of the div accordingly.

Originally, I had the function call back to itself using setTimeout after the loop had gone through all the divs and changed their opacities appropriately.
This caused an out of memory error (though, strangely, if I had any alerts in the function it didn't give me the error).
So the version below has the code in a while loop to let it run for 20 seconds - this gives me the "a script...run slowly, do you want to continue the script?" message.

So I have several questions:
1) First and foremost, why is my function causing out of memory/run slowly errors and what is the best way to fix that?
2) Is there a better way to code this effect (final result will be six lights fading in and out for a minute or so).
3)I'm not an experienced programmer, so any bad practices, ways to streamline, no no's, etc. that you see, please point out.

I've only posted the script here - the page simple consists of three divs (id's grad0, grad1, grad2) and a call to the function copied here.

Thanks in advance.

Code:

function commencez(){                       //parent function to store var's
  var TimeToFade = 10000;
	theArray = new Array(2);
	var wrench = new Date().getTime();
	
	for (var a=0; a<3; a++){                           //fill the array with objects
	 theArray[a] = document.getElementById("grad" + a);
	 theArray[a].FadeState = -2;                     //start them transparent
	}

  function fader() {
     var check = new Date().getTime();  //stops the function after 30 seconds
     if( check <= wrench + 30000 )
     {
       return;
      }

	  for(var i=0; i<3; i++){
		 
          if (theArray[i].FadeState !=1 && theArray[i].FadeState != -1)
          {
           if( theArray[i].FadeState == 2)
           {
             theArray[i].FadeState = -1;
             theArray[i].FadeTimeLeft = TimeToFade;
             theArray[i].FadeBegan = new Date().getTime();
            }
           if( theArray[i].FadeState == -2)
           {
             var rndm=Math.floor(Math.random()*11);
             if( rndm == 1)
             {
               theArray[i].FadeState = 1;
               theArray[i].FadeTimeLeft = TimeToFade;
               theArray[i].FadeBegan = new Date().getTime();
              }
            }
           }

           if( theArray[i].FadeState == 1 || theArray[i].FadeState == -1)
           {
            var now = new Date().getTime();
            since = now - theArray[i].FadeBegan;

            if( theArray[i].FadeTimeLeft <= since )
            {
              theArray[i].style.opacity = theArray[i].FadeState == 1 ? '1' : '0.2';
              theArray[i].style.filter = 'alpha(opacity = ' +
                       (theArray[i].FadeState == 1 ? '100' : '20') + ')';
              theArray[i].FadeState = theArray[i].FadeState == 1 ? 2 : 2;
            }
            
            theArray[i].FadeTimeLeft -= since;
            var howMuch = theArray[i].FadeTimeLeft / TimeToFade;

            if( theArray[i].FadeState == 1)
            {
              howMuch = 1-howMuch;
              theArray[i].style.opacity = howMuch;
              theArray[i].style.filter = 'alpha(opacity = ' + (howMuch*100) + ')';
             }
             if( theArray[i].FadeState == -1)
             {
               theArray[i].style.opacity = howMuch;
               theArray[i].style.filter = 'alpha(opacity = ' + (howMuch*100) + ')';
              }
            }
          } //close the for loop
         setTimeout( fader() , 500); //last thing fader does is recall itself after half a second

       } //close the fader function
  fader();
}     //close parent function

</script>

Please help have a look at the scripts...
Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out?
I've wanted to make the image disappear shortly before a new image is loaded.
I've worked on this and played around with the scripts, yet no finding...
Please do tell me if you know the answer to it. Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
	var pic = document.getElementById("pic");
	document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
	
	}

var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";

var o = 100;
var t;
var p = 0;
var f = 1;

function nextImageFading(){
	
	t = setInterval(
	function(){
	
				pic.src = img[p];
			
				pic.style.filter = "alpha(opacity="+o+")";
				pic.style.MozOpacity = o/100;
				pic.style.opacity = o/100;
				o -= 1;
				
				if(o<=0){
					
					clearInterval(t);
					
					if(p<img.length-1){
						p = p+1;

						}
					else {p=0;}
					
					pic.src = img[p];
					pic.style.filter = "alpha(opacity=100)";
					pic.style.MozOpacity = 1;
       				pic.style.opacity = 1;

					o = 100;

						}

					},f);

				}
	

</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>

How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS.

You can view the HTML page in question he

http://aksdesigns.co.uk/temp/template.html

The DIV container is the one with the ID of #MainContent

Code:

#MainContent {
	width: 980px;
	height: 550px;
	margin: 0 auto;
	padding: 0px;
	background-image: url(images/Content-bg-1.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	border-left: 2px solid #153365;
	border-right: 1px solid #FFF;
}

It probably couldn't be done using CSS be how could I achieve this with Javascript?

Hi I have a code which allows a set few images to be used in a slide-show type style for switching the documents background image which displays a set few images which are declared in an object array.

Basicly I have it all working perfectly with a "Timer" object value so you can set your own display length per picture but what I can't seem to do is make a cross-browser image fade transaction which works for background images, Here is the code I wrote and how its used, if anyone can help with links or examples that would be a very big help.

ORIGINSlide.js
Code:

/*******************************************
 *                                         *
 *  ORIGIN Background Image SlideShow      *
 *  Build 1.090.350.09                     *
 *                                         *
 *  @Author: CMBSystems (Chris Bearcroft)  *
 *  @Copyright: CMBSystems                 *
 *  @Created: 11/6/2010,1:24 AM (GMT)      *
 *                                         *
 *******************************************/

(function($){
  $.ORIGIN = { // Starting The ORIGIN Class
    Background: { // Starting The Background Sub-Class
      Default: 0, // Default Array Key ID
      Element: [], // Creating The Object For The Background Element
      Slide: function() { // Starting The Slide Function
        // Setting-Up The Element For Use In Update
        $.ORIGIN.Background.Element = arguments[0];
        // Updating The Document Body Background Image
        setInterval('ORIGIN.Background.Update()',$.ORIGIN.Background.Element.Timer);
      },
      Preload: function(img) { // Starting The Preload Function
        // Preload The Given Image Ready For Displaying
        var loadIMG=new Image();
        // Setting The Source For The Given Image
        loadIMG.src=img;
      },
      Update: function() { // Starting The Update Function
        if($.ORIGIN.Background.Element.Images !== undefined) {
          if($.ORIGIN.Background.Default == $.ORIGIN.Background.Element.Images.length - 1) {
            // Set Default Value As 0
            $.ORIGIN.Background.Default = 0;
            // Preload Next Image
            $.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
          } else {
            // Set Default Value As Current Array Key ID
            $.ORIGIN.Background.Default = parseInt($.ORIGIN.Background.Default + 1);
            // Preload Next Image
            $.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
          }
          // Set Document Body Background As The New Image
          document.body.style.backgroundImage = "url("+$.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default]+")";
        }
      }
    }
  };
})(window);

Hoe to use:-
Code:

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
  background: #000000 url(images/1.jpg) bottom fixed no-repeat;
}
</style>
<script src="ORIGINSlide.js" type="text/javascript"></script>
<script type="text/javascript">
ORIGIN.Background.Slide({
  "Timer":5000,
  "Images": [
    "images/1.jpg", // !IMPORTANT - Same image as the default background image.
    "images/2.jpg",
    "images/3.jpg"
  ]
});
</script>
</head>
<body>

</body>
</html>

If anyone can help me please do, Thank You
DJCMBear ♫♫

http://visualslideshow.com/

I want the code for the pictures slideshow that is used in the above link. Help me out!

Okay, so I've been trying to pick up JavaScript and JQuery. And I have a few questions, would be very grateful for answers:

-If I'm making a sliding image gallery with JQuery, how do I store my images in an array? I take it this is the best way? I've made a JQuery gallery by assigning each image an ID, and hiding the ones that aren't required. This looks like bad practice though.

I take it it should work with a standard JavaScript array, then reference the position of the image I've loaded? like [0][1][2] etc, but something must be amiss in my code.

So basically, I've animated my image in, and there's a next button that I want to take me to the next image in the sequence. Can anyone give me a tip?

Thanks a lot.

Hi, i have a slideshow that works.
I want to store my images in a folder images/slideshow/1.jpg for all my images up to 10.jpg.

I have tried to adjust the code so i can store the images in a folder but the code cant find the images.

Any help would be greatly appreciated, thank you.


I have this code in the head section:

<script type="text/javascript">
thisImg=1;
imgCt=10;
function newSlide(direction) {
thisImg = thisImg + direction;
if(thisImg <1) {thisImg = imgCt;}
if(thisImg > imgCt) {thisImg = 1;}
document.getElementById('slideshow').src=thisImg + '.jpg';
}
</script>




I have this code in the body section:

<form>
<img src="1.jpg" id="slideshow" alt="Photo slideshow" width="213" height="184" >
<p>
<input type="button" value="<-- Previous photo"
onClick="newSlide(-1)">
<input type="button" value="Next photo -->"
onClick="newSlide(1)" >
</p>
</form>

Hi everybody, I have written a javascript slideshow with pause-play-next-previous buttons, but the images are too many and users have to wait too long especially with slower connections - i wonder if anybody can suggest a way to implement the script with fast preloading of the first few images, increment preloading or a similar trick. I will copy my code below but i also copy first this link:

http://www.javascriptkit.com/script/...entslide.shtml

which is an example of increment loading slideshow working fine! my problem is i am quite new to javascript and i wouldnt know how to customize it in order to take away the link function, that i dont need, and add captions and buttons etc.

Any advice in one of the two directions (working on my own script below or customizing the linked one above) would be very very appreciated!
Also alternative ideas (i.e. some solutions using pure CSS) are welcome!
I do know some jquery plugin could do but i am trying to go more into the code, even though i still need a lot of advices and tutorials, the goal is solving this specific problem but also learning! Thx a lot in advance.

Here my code (just 2 images here in the list to make it shorter for you, the complete list is more than 50 pics!):

Code:

<script language="JavaScript">
<!--
var interval = 8000;
var random_display = 0;
var imageDir = "portraits/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = new imageItem(imageDir +
"image1.jpg");
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = new imageItem(imageDir +
"image2.jpg");


var totalImages = imageArray.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}

else {
imageNum = (imageNum+1) % totalImages;
}
var new_image = get_ImageItemLocation(imageArray

[imageNum]);

document.getElementById("didascalia").innerHTML =

didascalieArray[imageNum];
return(new_image);
}

function getPrevImage() {
if(imageNum-1 < 0) {
imageNum = totalImages-1;
}
else
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray

[imageNum]);
document.getElementById("didascalia").innerHTML =

didascalieArray[imageNum];
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

// -->

</script>

I recently installed a dynamic slideshow on my server and tried eliminating the background from "black" to "none" in the fadeslideshow.js so I could use transparent images to reveal the blue background on my site, but for some reason slide 1 stays on screen when switching to slide 2... not sure what to do, would appreciate any help. Thanks, Josh.

please visit to view slideshow error
http://www.scannmarketing.com

I recently installed a dynamic slideshow on my server and tried eliminating the background from "black" to "none" in the fadeslideshow.js so I could use transparent images to reveal the blue background on my site, but for some reason slide 1 stays on screen when switching to slide 2... not sure what to do, would appreciate any help. Thanks, Josh.

please visit to view slideshow error
http://www.scannmarketing.com

Hi people, I am using a drupal module, views slideshow, it displays images on my site, the landscape sized images are showing fine, however the portrait images are not centered but aligned left and they look cramped over to one side, I have tried css and its not working for sure, this is the script, Im sorry but I no absolutely no javascript so if anyone can figure this one out I will owe you one. I guess it will need to check for the largest width in the slideshow and then half this for the centre. the link to the file is here aswell http://www.2shared.com/document/3kyc...slideshow.html

// $Id: views_slideshow.js,v 1.1.2.1.2.39 2010/07/01 03:29:08 redndahead Exp $

/**
* @file
* A simple jQuery SingleFrame Div Slideshow Rotator.
*/

/**
* This will set our initial behavior, by starting up each individual slideshow.
*/
Drupal.behaviors.viewsSlideshowSingleFrame = function (context) {
$('.views_slideshow_singleframe_main:not(.viewsSlideshowSingleFrame-processed)', context).addClass('viewsSlideshowSingleFrame-processed').each(function() {
var fullId = '#' + $(this).attr('id');
var settings = Drupal.settings.viewsSlideshowSingleFrame[fullId];
settings.targetId = '#' + $(fullId + " :first").attr('id');
settings.paused = false;

settings.opts = {
speed:settings.speed,
timeoutarseInt(settings.timeout),
delayarseInt(settings.delay),
sync:settings.sync==1,
random:settings.random==1,
pause:false,
allowPagerClickBubblesettings.pager_hover==1 || settings.pager_click_to_page),
prevsettings.controls > 0)?'#views_slideshow_singleframe_prev_' + settings.vss_id:null,
nextsettings.controls > 0)?'#views_slideshow_singleframe_next_' + settings.vss_id:null,
pagersettings.pager > 0)?'#views_slideshow_singleframe_pager_' + settings.vss_id:null,
nowraparseInt(settings.nowrap),
pagerAnchorBuilder: function(idx, slide) {
var classes = 'pager-item pager-num-' + (idx+1);
if (idx == 0) {
classes += ' first';
}
if ($(slide).siblings().length == idx) {
classes += ' last';
}

if (idx % 2) {
classes += ' odd';
}
else {
classes += ' even';
}

var theme = 'viewsSlideshowPager' + settings.pager_type;
return Drupal.theme.prototype[theme] ? Drupal.theme(theme, classes, idx, slide, settings) : '';
},
after:function(curr, next, opts) {
// Used for Image Counter.
if (settings.image_count) {
$('#views_slideshow_singleframe_image_count_' + settings.vss_id + ' span.num').html(opts.currSlide + 1);
$('#views_slideshow_singleframe_image_count_' + settings.vss_id + ' span.total').html(opts.slideCount);
}
},
befo function(curr, next, opts) {
// Remember last slide.
if (settings.remember_slide) {
createCookie(settings.vss_id, opts.currSlide + 1, settings.remember_slide_days);
}

// Make variable height.
if (settings.fixed_height == 0) {
//get the height of the current slide
var $ht = $(this).height();
//set the container's height to that of the current slide
$(this).parent().animate({height: $ht});
}
},
cleartypesettings.ie.cleartype == 'true')? true : false,
cleartypeNoBgsettings.ie.cleartypenobg == 'true')? true : false
}

// Set the starting slide if we are supposed to remember the slide
if (settings.remember_slide) {
var startSlide = readCookie(settings.vss_id);
if (startSlide == null) {
startSlide = 0;
}
settings.opts.startingSlide = startSlide;
}

if (settings.pager_hover == 1) {
settings.opts.pagerEvent = 'mouseover';
settings.opts.pauseOnPagerHover = true;
}

if (settings.effect == 'none') {
settings.opts.speed = 1;
}
else {
settings.opts.fx = settings.effect;
}

// Pause on hover.
if (settings.pause == 1) {
$('#views_slideshow_singleframe_teaser_section_' + settings.vss_id).hover(function() {
$(settings.targetId).cycle('pause');
}, function() {
if (settings.paused == false) {
$(settings.targetId).cycle('resume');
}
});
}

// Pause on clicking of the slide.
if (settings.pause_on_click == 1) {
$('#views_slideshow_singleframe_teaser_section_' + settings.vss_id).click(function() {
viewsSlideshowSingleFramePause(settings);
});
}

// Add additional settings.
if (settings.advanced != "\n") {
var advanced = settings.advanced.split("\n");
for (i=0; i<advanced.length; i++) {
var prop = '';
var value = '';
var property = advanced[i].split(":");
for (j=0; j<property.length; j++) {
if (j == 0) {
prop = property[j];
}
else if (j == 1) {
value = property[j];
}
else {
value += ":" + property[j];
}
}

// Need to evaluate so true, false and numerics aren't a string.
if (value == 'true' || value == 'false' || IsNumeric(value)) {
value = eval(value);
}
else {
// Parse strings into functions.
var func = value.match(/function\s*\((.*?)\)\s*\{(.*)\}/i);
if (func) {
value = new Function(func[1].match(/(\w+)/g), func[2]);
}
}

// Call both functions if prop was set previously.
if (typeof(value) == "function" && prop in settings.opts) {
var callboth = function(before_func, new_func) {
return function() {
before_func.apply(null, arguments);
new_func.apply(null, arguments);
};
};
settings.opts[prop] = callboth(settings.opts[prop], value);
}
else {
settings.opts[prop] = value;
}
}
}

$(settings.targetId).cycle(settings.opts);

// Start Paused
if (settings.start_paused) {
viewsSlideshowSingleFramePause(settings);
}

// Pause if hidden.
if (settings.pause_when_hidden) {
var checkPause = function(settings) {
// If the slideshow is visible and it is paused then resume.
// otherwise if the slideshow is not visible and it is not paused then
// pause it.
var visible = viewsSlideshowSingleFrameIsVisible(settings.targetId, settings.pause_when_hidden_type, settings.amount_allowed_visible);
if (visible && settings.paused) {
viewsSlideshowSingleFrameResume(settings);
}
else if (!visible && !settings.paused) {
viewsSlideshowSingleFramePause(settings);
}
}

// Check when scrolled.
$(window).scroll(function() {
checkPause(settings);
});

// Check when the window is resized.
$(window).resize(function() {
checkPause(settings);
});
}

// Show image count for people who have js enabled.
$('#views_slideshow_singleframe_image_count_' + settings.vss_id).show();

if (settings.controls > 0) {
// Show controls for people who have js enabled browsers.
$('#views_slideshow_singleframe_controls_' + settings.vss_id).show();

$('#views_slideshow_singleframe_playpause_' + settings.vss_id).click(function(e) {
if (settings.paused) {
viewsSlideshowSingleFrameResume(settings);
}
else {
viewsSlideshowSingleFramePause(settings);
}
e.preventDefault();
});
}
});
}

// Pause the slideshow
viewsSlideshowSingleFramePause = function (settings) {
//make Resume translatable
var resume = Drupal.t('Resume');

$(settings.targetId).cycle('pause');
if (settings.controls > 0) {
$('#views_slideshow_singleframe_playpause_' + settings.vss_id)
.addClass('views_slideshow_singleframe_play')
.addClass('views_slideshow_play')
.removeClass('views_slideshow_singleframe_pause')
.removeClass('views_slideshow_pause')
.text(resume);
}
settings.paused = true;
}

// Resume the slideshow
viewsSlideshowSingleFrameResume = function (settings) {
$(settings.targetId).cycle('resume');
if (settings.controls > 0) {
$('#views_slideshow_singleframe_playpause_' + settings.vss_id)
.addClass('views_slideshow_singleframe_pause')
.addClass('views_slideshow_pause')
.removeClass('views_slideshow_singleframe_play')
.removeClass('views_slideshow_play')
.text('Pause');
}
settings.paused = false;
}

Drupal.theme.prototype.viewsSlideshowPagerThumbnails = function (classes, idx, slide, settings) {
var href = '#';
if (settings.pager_click_to_page) {
href = $(slide).find('a').attr('href');
}
return '<div class="' + classes + '"><a href="' + href + '"><img src="' + $(slide).find('img').attr('src') + '" /></a></div>';
}

Drupal.theme.prototype.viewsSlideshowPagerNumbered = function (classes, idx, slide, settings) {
var href = '#';
if (settings.pager_click_to_page) {
href = $(slide).find('a').attr('href');
}
return '<div class="' + classes + '"><a href="' + href + '">' + (idx+1) + '</a></div>';
}

// Verify that the value is a number.
function IsNumeric(sText) {
var ValidChars = "0123456789";
var IsNumber=true;
var Char;

for (var i=0; i < sText.length && IsNumber == true; i++) {
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1) {
IsNumber = false;
}
}
return IsNumber;
}

/**
* Cookie Handling Functions
*/
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length,c.length);
}
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

/**
* Checks to see if the slide is visible enough.
* elem = element to check.
* type = The way to calculate how much is visible.
* amountVisible = amount that should be visible. Either in percent or px. If
* it's not defined then all of the slide must be visible.
*
* Returns true or false
*/
function viewsSlideshowSingleFrameIsVisible(elem, type, amountVisible) {
// Get the top and bottom of the window;
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var docViewLeft = $(window).scrollLeft();
var docViewRight = docViewLeft + $(window).width();

// Get the top, bottom, and height of the slide;
var elemTop = $(elem).offset().top;
var elemHeight = $(elem).height();
var elemBottom = elemTop + elemHeight;
var elemLeft = $(elem).offset().left;
var elemWidth = $(elem).width();
var elemRight = elemLeft + elemWidth;
var elemArea = elemHeight * elemWidth;

// Calculate what's hiding in the slide.
var missingLeft = 0;
var missingRight = 0;
var missingTop = 0;
var missingBottom = 0;

// Find out how much of the slide is missing from the left.
if (elemLeft < docViewLeft) {
missingLeft = docViewLeft - elemLeft;
}

// Find out how much of the slide is missing from the right.
if (elemRight > docViewRight) {
missingRight = elemRight - docViewRight;
}

// Find out how much of the slide is missing from the top.
if (elemTop < docViewTop) {
missingTop = docViewTop - elemTop;
}

// Find out how much of the slide is missing from the bottom.
if (elemBottom > docViewBottom) {
missingBottom = elemBottom - docViewBottom;
}

// If there is no amountVisible defined then check to see if the whole slide
// is visible.
if (type == 'full') {
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop)
&& (elemLeft >= docViewLeft) && (elemRight <= docViewRight)
&& (elemLeft <= docViewRight) && (elemRight >= docViewLeft));
}
else if(type == 'vertical') {
var verticalShowing = elemHeight - missingTop - missingBottom;

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((verticalShowing/elemHeight)*100) >= parseInt(amountVisible));
}
else {
return (verticalShowing >= parseInt(amountVisible));
}
}
else if(type == 'horizontal') {
var horizontalShowing = elemWidth - missingLeft - missingRight;

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((horizontalShowing/elemWidth)*100) >= parseInt(amountVisible));
}
else {
return (horizontalShowing >= parseInt(amountVisible));
}
}
else if(type == 'area') {
var areaShowing = (elemWidth - missingLeft - missingRight) * (elemHeight - missingTop - missingBottom);

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((areaShowing/elemArea)*100) >= parseInt(amountVisible));
}
else {
return (areaShowing >= parseInt(amountVisible));
}
}
}

Hi

I have set an overall size for the Slideshow 2! div in the CSS file as follows:

.slideshow {
height:250px;
margin: 0 auto;
width:420px;
}

I would then like all the images I use in the slideshow to fit within this area (i.e. 420 x 250). The images will all have a height of 250px, but different widths. For widths less than 420px I would like the image to be positioned centrally in the div along the horizontal axis as in the following image:



for images wider than 420px I would like them to be positioned centrally in the div along the vertical axis as in the following image:



I wonder if it's possible to achieve this with Slideshow 2! and if not, whether another script will help me achieve this?

Thanks

Nick

PLEASE! I NEED HELP!
I inherited this problem from a client who insists on keeping this template. I've got all of the images in the correct folder, the slideshow css is correct, but I'm not sure how to edit the Slideshow.js file to show the 2 additional images. The first 3 images work perfectly. I was able to swap custom images for the original images without a problem.
Here is the Slideshow.js code

Code:

 var $$ = $.fn;

$$.extend({
  SplitID : function()
  {
    return this.attr('id').split('-').pop();
  },

  Slideshow : {
    Ready : function()
    {
      $('div.tmpSlideshowControl')
        .hover(
          function() {
            $(this).addClass('tmpSlideshowControlOn');
          },
          function() {
            $(this).removeClass('tmpSlideshowControlOn');
          }
        )
        .click(
          function() {
            $$.Slideshow.Interrupted = true;

            $('div.tmpSlide').hide();
            $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

            $('div#tmpSlide-' + $(this).SplitID()).show()
            $(this).addClass('tmpSlideshowControlActive');
          }
        );

      this.Counter = 1;
      this.Interrupted = false;

      this.Transition();
    },

    Transition : function()
    {
      if (this.Interrupted) {
        return;
      }

      this.Last = this.Counter - 1;

      if (this.Last < 1) {
        this.Last = 3;
      }

      $('div#tmpSlide-' + this.Last).fadeOut(
        'slow',
        function() {
          $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
          $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
          $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

          $$.Slideshow.Counter++;

          if ($$.Slideshow.Counter > 3) {
            $$.Slideshow.Counter = 1;
          }

          setTimeout('$$.Slideshow.Transition();', 4000);
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $$.Slideshow.Ready();
  }
);

The html code for the pages looks like this:
Code:

 <div id='tmpSlideshow'> 
              <div id='tmpSlide-1' class='tmpSlide'> 
                <div class="banner1"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-2' class='tmpSlide'> 
                <div class="banner2"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-3' class='tmpSlide'> 
                <div class="banner3"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-4' class='tmpSlide'> 
                <div class="banner4"> 
                  <div class="banner"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
                    </div>
                    <div class="clear"><img src="images/specer.gif" width="1" height="31" alt="" /></div>
                </div>
          </div>
		   <div id='tmpSlide-5' class='tmpSlide'> 
                <div class="banner5"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Weight Loss</li>
                          <li>Fit for Life</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

Hi, thanks for your time first of all-

secondly, I am at a loss for what to do next to get these slideshows functioning. You can see the current iteration he http://www.pauljameswilliams.com/portfolio.html

I am using hte plug in galleria, and I have got it working in a stand alone version with the same images and and folder structure. The difference may be that I have the content nested in these div tags? to create tabs. i really don't know.

Here is the structure within the portfolio tab, under the Identity heading: ( there will be more images once I get this working:

Code:

<div>
<div class="demo">
<ul class="gallery_demo galleria">
<li><img src="images/portfolio01.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="images/portfolio02.jpg" alt="Stones" title="Stones - from Aple images"></li>
<li><img src="images/portfolio03.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
</ul>
<div class="galleria_container"></div>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p>
</div>
</div>

I can give you more code if necesary, but I don't want to overwhelm anyone. thanks.

Ok, I am in a small pickle here.

I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done.

Now they have 6 images that need to rotate through.
Easy enough again, script done.

The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month.

So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there.
This is the spot I need help at.
Code:

function slideit(){
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			whichimage=step
			if (step<10)
			step++
			else
			step=1

I wanted to add another part to the IF statement like maybe.
Code:

If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))

Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names)


The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it.

I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance!

Code:

<html>
	<head>
		<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
		<style type="text/css">
			body{
					margin: 0px;
					width: 405px;
					height: 205px;
					font-family; Georgia;
			}		
		</style>
			
		<script type="text/javascript">

			var image1=new Image()
			image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
			var image2=new Image()
			image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
			var image3=new Image()
			image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
			var image4=new Image()
			image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
			var image5=new Image()
			image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
			var image6=new Image()
			image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
			var image7=new Image()
			image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
			var image8=new Image()
			image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
			var image9=new Image()
			image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
			var image10=new Image()
			image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
			
		</script>
			
	</head>
	
	<body>

		<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></a>

		<script type="text/javascript">
			
			var step=1
			var whichimage=1
			function slideit(){
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			whichimage=step
			if (step<10)
			step++
			else
			step=1
			setTimeout("slideit()",6000)
			}
			slideit()
			function slidelink(){
			if (whichimage==1)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
			else if (whichimage==2)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
			else if (whichimage==3)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
			else if (whichimage==4)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
			else if (whichimage==5)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
			else if (whichimage==6)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
			else if (whichimage==7)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
			else if (whichimage==8)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
			else if (whichimage==9)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
			else if (whichimage==10)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
			}	
		</script>
	</body>
</html>