Slideshow

Discussion in 'JavaScript' started by vitalytis, Jul 1, 2011.

0
  1. #1
    Hi,
    this is a slideshow script:
    <html>
<head>
<title>(Type a title for your page here)</title>
<script language="JavaScript">
var present_slide=0;

var images = new Array(<?php $files = glob("pics/*.*"); for ($i=1; $i<count($files); $i++) { $num = $files[$i]; echo "'$num',";} ?><?php echo "'pics/LearnToFly_j2me_gen_banner_450x260.png'" ?>);

objImage = new Image();

function download(img_src){
// preload the image file
objImage.src=images[img_src];
ResizeThem();
}

function displaynext(shift){
present_slide=present_slide + shift;

if(images.length > present_slide && present_slide >= 0){
document.images['im'].src = images[present_slide];

var next_slide=present_slide + 1;
download(next_slide); // Download the next image 
}

if(present_slide+1 >= images.length ){
document.f1.Next.style.visibility = "hidden";
present_slide=images.length-1;
}else{document.f1.Next.style.visibility = "visible";}

if(present_slide<=0 ){
document.f1.Prev.style.visibility = "hidden";
present_slide=0;
}else{
document.f1.Prev.style.visibility = "visible";}
}
function ResizeThem()
{
  var maxheight = 500;
  var maxwidth = 500;
  var imgs = document.getElementsByTagName("img");
  for ( var p = 0; p < imgs.length; p++ )
  {
    if ( imgs[p].getAttribute("alt") == "user posted image" )
    {
      var w = parseInt( imgs[p].width );
      var h = parseInt( imgs[p].height );
      if ( w > maxwidth )
      {
        imgs[p].style.cursor = "pointer";
        imgs[p].onclick = function( )
        {
          var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
          iw.focus();
        };
        h = ( maxwidth / w ) * h;
        w = maxwidth;
        imgs[p].height = h;
        imgs[p].width = w;
      }
      if ( h > maxheight )
      {
        imgs[p].style.cursor="pointer";
        imgs[p].onclick = function( )
        { 
          var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
          iw.focus( );
        };
        imgs[p].width = ( maxheight / h ) * w;
        imgs[p].height = maxheight;
      }
    }
  }
}
</script>
</head>
<body onLoad="displaynext(0)">

<form name="f1" method=post action=''''>

<img name="im" alt="user posted image"></a><br>
<input type="button" name="Prev" value=" << " onClick="displaynext(-1);">
<input type="button" name="Next" value=" >> " onClick="displaynext(1);">
</form>
</body>
</html>
    HTML:
    Function ResizeThem, shold change image size, but it just changes the first image size, and when you press the arow to see next image, all the images gets the same size. What is wrong with this script? Please help! Oh and sory for my english...
     
    vitalytis, Jul 1, 2011 IP
  2. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #2
    Just here:

    objImage = new Image();
function download(img_src){// preload the image 
  fileobjImage.src=images[img_src];
    Code (markup):
    The variable is objImage, not fileobjImage, so try changing that 3rd line to:

    objImage.src=images[img_src];
    Code (markup):
     
    FilmFiddler, Jul 1, 2011 IP
  3. vitalytis

    vitalytis Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    dude there's no fileobjImage on the script :D
     
    vitalytis, Jul 1, 2011 IP
  4. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #4
    Sorry about that last post - with the syntax highlighting killing all the line feeds, I couldn't see that part of the comment line above had gotten onto the next code line there when I copied it to test.

    I think I see what the problem is - the image aspect ratios are not being preserved. But at the moment, I can't see what the reason is for the loop. There is only one image object to be resized - the image named 'im' which is a child of the form. So when the image src is swapped, the ResizeThem() function is then called, and it goes through all the images on the page, resizing them if necessary and setting an onclick event handler to each. But that will only apply to the one image here - the form's child image named 'im'. The length of the imgs array is 1 only. So is that loop needed?

    By the way, there's a loose </a> just after the <img>. And the script language attribute is obsolete; it should to be <script type="text/javascript">. Although they are probably not affecting things here.
     
    FilmFiddler, Jul 2, 2011 IP
  5. vitalytis

    vitalytis Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Any solutions? Oh, by the way, theres another post about slide down menu. Coul you help me with that?
     
    vitalytis, Jul 2, 2011 IP