Showing an image from an array of images - Javascript

Question

I have a large image which is shown on my homepage  and when the user clicks the  next img  button the large image on the homepage should change to the next image in the array    However  the next arrow when clicked does nothing  and the main image on the homepage does not change   I need to do this in javascript   In the HTML    lt  --Main Content of the page -- gt    lt div id  splash  gt   lt img src  images img Splash image1 jpg  alt    id  mainImg  gt    lt  div gt     lt div id  imglist  gt   lt a href  javascript nextImage  mainImg    gt  lt img src  images next img png  alt    gt  lt  a gt    And then in the javascript file   var imgArray   new Array     imgArray 0    new Image    imgArray 0  src    images img Splash image1 jpg    imgArray 1    new Image    imgArray 1  src    images img Splash image2 jpg    imgArray 2    new Image    imgArray 2  src    images img Splash image3 jpg    imgArray 3    new Image    imgArray 3  src    images img Splash image4 jpg    imgArray 4    new Image    imgArray 4  src    images img Splash image5 jpg    imgArray 5    new Image    imgArray 5  src    images img Splash image6 jpg      ------------------------------------    function nextImage element        var img   document getElementById element        for var i   0 i lt imgArray length i                  if imgArray i     img                        if i    imgArray length                                var j   0                  document getElementById element  src   imgArray j  src                  break                            else             var j   i   1              document getElementById element  src   imgArray j  src              break                         Any help would be appreciated  Thanks

User · Answer

Here s your problem   if imgArray i     img    You re comparing an array element to a DOM object

User · Answer

Also  when checking for the last image  you must compare with imgArray length-1 because  for example  when array length is 2 then I will take the values 0 and 1  it won t reach the value 2  so you must compare with length-1 not with length  here is the fixed line   if i    imgArray length-1

User · Answer

lt script type  text javascript  gt  function bike     var data    b1 jpg    b2 jpg    b3 jpg    b4 jpg    b5 jpg    b6 jpg    b7 jpg    b8 jpg    var a  for a 0  a lt data length  a      document write   lt center gt  lt fieldset style  height 200px  float left  border-radius 15px  border-width 6px    lt img src    data a     height  200px  width  300px   gt  lt  fieldset gt  lt  center gt

User · Answer

This is a simple example and try to combine it with yours using some modifications  I prefer you set all the images in one array in order to make your code easier to read and shorter   var myImage   document getElementById  mainImage     var imageArray      images image1 jpg    images image2 jpg    images image3 jpg       images image4 jpg    images image5 jpg    images image6 jpg     var imageIndex   0    function changeImage       myImage setAttribute  src  imageArray imageIndex      imageIndex    imageIndex   1    imageArray length     setInterval changeImage  5000

User · Answer

Here s a somewhat cleaner way of implementing this   This makes the following changes    The code is DRYed up a bit to remove redundant and repeated code and strings  The code is made more generic reusable  We make the cache into an object so it has a self-contained interface and there are fewer globals  We compare  src attributes instead of DOM elements to make it work properly    Code   function imageCache base  firstNum  lastNum        this cache           var img      for  var i   firstNum  i  lt   lastnum  i              img   new Image            img src   base   i     jpg           this cache push img            imageCache prototype nextImage id        var element   document getElementById id       var targetSrc   element src      var cache   this cache      for  var i   0  i  lt  cache length  i              if  cache i  src      targetSrc                i                if  i  gt   cache length                    i   0                            element src   cache i  src              return                        sample usage  var myCache   new imageCache  images img Splash image   1  6   myCache nextImage  foo      Some advantages of this more object oriented and DRYed approach    You can add more images by just creating the images in the numeric sequences and changing one numeric value in the constructor rather than copying lots more lines of array declarations  You can use this more than one place in your app by just creating more than one imageCache object  You can change the base URL by changing one string rather than N strings  The code size is smaller  because of the removal of repeated code   The cache object could easily be extended to offer more capabilities such as first  last  skip  etc    You could add centralize error handling in one place so if one image doesn t exist and doesn t load successfully  it s automatically removed from the cache  You can reuse this in other web pages you develop by only change the arguments to the constructor and not actually changing the implementation code    P S  If you don t know what DRY stands for  it s  Don t Repeat Yourself  and basically means that you should never have many copies of similar looking code   Anytime you have that  it should be reduced somehow to a loop or function or something that removes the need for lots of similarly looking copies of code   The end result will be smaller  usually easier to maintain and often more reusable

User · Answer

Just as Diodeus said  you re comparing an Image to a HTMLDomObject  Instead compare their  src attribute   var imgArray   new Array     imgArray 0    new Image    imgArray 0  src    images img Splash image1 jpg    imgArray 1    new Image    imgArray 1  src    images img Splash image2 jpg           more images         imgArray 5    new Image    imgArray 5  src    images img Splash image6 jpg      ------------------------------------    function nextImage element        var img   document getElementById element        for var i   0  i  lt  imgArray length i                  if imgArray i  src    img src      lt  lt  check this                       if i     imgArray length                   document getElementById element  src   imgArray 0  src                  break                            document getElementById element  src   imgArray i 1  src              break

[javascript] Showing an image from an array of images - Javascript

Examples related to javascript

Examples related to html

Examples related to arrays

Examples related to image