JavaScript - Images Slideshow

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));
}
}
}

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>

Alrighty so here's what I have.
Live example:
http://www.thestrikeforum.com/ex/

It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript).

There are 5 images in the folder rotateimage which also has the php script getimages.php in it.

Currently only the first image fades in however I want all the images to fade in as the first one does.

Codes:

Php script that gets all the images for the array:
PHP Code:
<?

//PHP SCRIPT: getimages.php

Header("content-type: application/x-javascript");



//This function gets the file names of all images in the current directory

//and ouputs them as a JavaScript array

function returnimages($dirname=".") {

$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions

$files = array();

$curimage=0;

if($handle = opendir($dirname)) {

while(false !== ($file = readdir($handle))){

if(eregi($pattern, $file)){ //if this file is a valid image

//Output it as a JavaScript array element

echo 'galleryarray['.$curimage.']="'.$file .'";';

$curimage++;

}

}



closedir($handle);

}

return($files);

}



echo 'var galleryarray=new Array();'; //Define array in JavaScript

returnimages() //Output the array elements containing the image file names

?>



Main html page with the javascript:


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}



function initImage() {

  imageId = 'slideshow';

  image = document.getElementById(imageId);

  setOpacity(image, 0);

  image.style.visibility = 'visible';

  fadeIn(imageId,0);

}



function setOpacity(obj, opacity) {

  opacity = (opacity == 100)?99.999:opacity;

  

  // IE/Win

  obj.style.filter = "alpha(opacity:"+opacity+")";

  

  // Safari<1.2, Konqueror

  obj.style.KHTMLOpacity = opacity/100;

  

  // Older Mozilla and Firefox

  obj.style.MozOpacity = opacity/100;

  

  // Safari 1.2, newer Firefox and Mozilla, CSS3

  obj.style.opacity = opacity/100;

}



function fadeIn(objId,opacity) {

  if (document.getElementById) {

    obj = document.getElementById(objId);

    if (opacity <= 100) {

      setOpacity(obj, opacity);

      opacity += 10;

      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);

    }

  }

}



window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

If anyone could assist me in doing so or can help me find a better way to do the fading images for the slideshow feel free to share.. here's the main page code WITHOUT the fading code:




Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}






window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

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

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>

Hey guys I'm need to put a photo slideshow on my website with a lot of images. I don't want all the images to download as you come to the website as this would take forever. Are there any pretty simple slideshows that load images just before they are about to come in the view?





Reply With Quote




01-25-2015, 01:07 PM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

How will the program know which image is "about" to come into view? Or are they viewed sequentially? If so there is no need for preloading images to take "forever". Preload the first (say) 5 and then preload the rest while the user is viewing the first ones. Or when each "next" image is selected for viewing preload the next following one.

hi evey one
I need a slideshow like this website .

zbiddy.com

as you can see , in the top of the page is a slide show . I just need a slideshow that change the content of each slide .

I've made my content for each slide and just need a script that change these content

I need your help very much
Thanks

Solved

Hi,

I desperately need a javascript slideshow that does the following:

1--shows still images with thumbnails
2--can be played manually or automatically
3--can embed youtube videos
4--audio can accompany slideshows
5--powered by javascript, not Flash so it shows up on iPad

Does anyone know where I can get such a slideshow? Thanks

Code:

var mySlideShow = document.getElementById("slideShow");

var imageArray=new Array(); 
imageArray[0]="url(images/Slide1.JPG)";       
imageArray[1]="url(images/Slide2.JPG)";
imageArray[2]="url(images/Slide3.JPG)";


var imageIndex = 0;

var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");

mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";


function changeRight  () {

mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex++;


	if (imageIndex >= imageArray.length) {
	imageIndex = 1;


	
	}
	
	console.log(imageIndex);
	
}


function changeLeft  () {

mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex--;
console.log(imageIndex);
	
}




rightArrow.onclick = function() {
	
	changeRight();
	
	}
	
leftArrow.onclick = function() {
	
	changeLeft();
	
}

So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work.

Any help would be awesome.

I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back.

Here is the book and the case problem I am on:
http://books.google.com/books?id=BeE...page&q&f=false

Basically the images is not loading up, or anything is happening.

//EDIT : I have the function setup() onLoad in the body ( body onload="setup()" )

Here is my code:

FileName: flibrary.js

Code:

function getStyle(object, styleName) {
   if (window.getComputedStyle) {
      return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
   } else if (object.currentStyle) {
      return object.currentStyle[styleName]
   }
}

// step 3
function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
            object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
   if (object.detachEvent)
       object.detachEvent("on" + evName, fnName);
   else if (object.removeEventListener)
            object.removeEventListener(evName, fnName, cap);
}

FileName: slideshows.js
Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 6
   Case Problem 2

   Author:  
   Date:    

   Filename: slideshow.js


   Global Variables:
  
   scrollButton
      References the scrolling button in the slide show

   diffX
      Stores the horizontal distance in pixels between the
      mouse pointer when the scrolling button is clicked
      and the left edge of the scrolling button.

   Functions List:

   setup()
      Initializes the contents of the Web page. Creates
      event handlers for the mouse and keyboard events

   grabIt(e)
      "Grabs" the scrolling button to set up the
       horizontal scrolling of the slide show

   moveIt(e)
      Moves the scrolling button horizontally through
      the scrollbar

   showSlide(x)
      Shows the image corresponding the to the x coordinate
      on the scrollbar

   dropIt(e)
      Drops the scrolling button after the user releases the
      mouse button

   keyShow(e)
      Uses the left and right arrow keys to move the scrolling
      button through the scrollbar

*/

var scrollButton;
var diffX;
// step 7
function setup(){
	scrollButton = document.getElementById("button");
	scrollButton.style.top = getStyle(scrollButton,"top");
	scrollButton.style.left = getStyle(scrollButton,"left");
	scrollButton.style.cursor = "pointer";
	addEvent(scrollButton, "mousedown", grabIt, false);
	addEvent(document, "keydown", keyShow, false);
}	
// step 8
function grabIt(e){
	var evt = e || window.event;
	var mouseX = evt.clientX;
	diffX = parseInt(scrollButton.style.left)- mouseX;
	addEvent(scrollButton, "mousemove", moveIt, false);
	addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
	var evt = e || window.event;
	var mouseX = evt.clientX;
	var buttonPosX = mouseX - diffX;
	showSlide();
}
// step 10
function showSlide(x){
	if(x<20){
		x = 20;
	}
	if(x>299){
		x = 299;
	}
	scrollButton.style.left = x;
	var i = Math.floor((x-20)/31);
	document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
	removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
	var evt = e || window.event;
	var key = event.keyCode;
	var buttonPosX = scrollButton.style.left;
	if(key == 37) buttonPosX -= 31;
	if(key == 39) buttonPosX += 31;
	showSlide(buttonPosX);
}

I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in. Here is the HTML for the area that holds the images

Code:

<div id="imageBox">

                <!-- Random Images -->

                <img src="images/image1.jpg" width="200" height="200" alt="School Images" id="randImage" />

                        </div>

and here is the external .js file for it

Code:

window.onload = pics;

var thisPic = 0;

 

        var schoolImages = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg");

 

function pics(){

 

       

        thisPic = Math.floor((Math.random() * schoolImages.length));

       

        document.getElementById('randImage').src = schoolImages[thisPic];      

       

        cycle();

       

       

}

 

function cycle(){

       

        thisPic++;

       

        if(thisPic == schoolImages.length){

                thisPic = 0;

        }

       

        document.getElementById('randImage').src = schoolImages[thisPic];

       

        setTimeout(cycle, 3 * 1000);
               
     
}

I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads. Does anyone see any issues to what is making this not work correctly now?

This slideshow has a drop down menu that lets you go from one picture to another.

Can someone help me modify it so that instead of a dropdown menu i have a list of numbers (horizontally,not vertically)?

I know absolutley nothing about javascript. sorry.

Thanks programmers!

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();

theimage[0]=["url", "", "1"];
theimage[1]=["url", "", "2"];
theimage[2]=["url", "", "3"];

//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//"jump to" box
for (y=0;y<theimage.length;y++) {
document.slideshow.imgComboBox[y]=new Option(theimage[y][2]);
}

//set the first slide
SetSlide(0);

}

//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;

//switch the image
document.images.imgslide.src=theimage[i][0];

//if drop down box
if(document.slideshow.imgComboBox){
document.slideshow.imgComboBox.selectedIndex = i;
}

//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];

}


//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}


//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select>
</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->