Making A Simple Javascript Image Gallery

March 09, 2024 Post a Comment

I'm trying to make a very simple Image gallery. Most of the design is already complete (used JQuery)...but now I'm trying to think out the logic it takes to get the images to chang

Solution 1:

Most importantly, you need to build the background property by concatenating ("+" operator) its different parts, as shown below ; otherwise it won't be replaced by the values from your array if you make it a static string.

Also use the global scope to declare and initialize your image array and counter :

<script>var myImage= newArray(); 
myImage[0]="penguins.jpg";       
myImage[1]="desert.jpg";
myImage[2]="jellyfish.jpg";
myImage[3]="flower.jpg"; 

varImageCnt = 0;

functionnext(){
    ImageCnt++;
    document.getElementById("whiteBox").style.background = 'url(' + myImage[ImageCnt] + ')';
  }
</script>

Finally, return false from onclick otherwise you'll reload the page :

<ahref="#"onclick="next();return false;"><imgsrc="next.png"/></a>

Solution 2:

This is the best example of a simple inline non-jQuery image gallery that I've found, obtained from http://extremestudio.ro/:

Baca Juga

<!DOCTYPE htmlPUBLIC><html><head><title>
      Simple and Effective Photo Gallery with HTML and JavaScript
    </title><styletype="text/css">body {
        background: #222;
        margin-top: 20px;
      }

      h3 {
        color: #eee;
        font-family: Verdana;
      }

      .thumbnailsimg {
        height: 80px;
        border: 4px solid #555;
        padding: 1px;
        margin: 010px10px0;
      }

      .thumbnailsimg:hover {
        border: 4px solid #00ccff;
        cursor:pointer;
      }

      .previewimg {
        border: 4px solid #444;
        padding: 1px;
        width: 400px;
      }
    </style></head><body><divclass="gallery"align="center"><h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/><divclass="thumbnails"><imgonmouseover="preview.src=img1.src"id="img1"src="http://bit.ly/2rz3hy"alt="Image Not Loaded"/><imgonmouseover="preview.src=img2.src"id="img2"src="http://bit.ly/1ug1e6"alt="Image Not Loaded"/><imgonmouseover="preview.src=img3.src"id="img3"src="http://bit.ly/1yIAYc"alt="Image Not Loaded"/><imgonmouseover="preview.src=img4.src"id="img4"src="http://bit.ly/2LHyDW"alt="Image Not Loaded"/><imgonmouseover="preview.src=img5.src"id="img5"src="http://bit.ly/2wyHSR"alt="Image Not Loaded"/><imgonmouseover="preview.src=img6.src"id="img6"src="http://bit.ly/yRo1i"alt="Image Not Loaded"/></div><br/><divclass="preview"align="center"><imgid="preview"src="http://bit.ly/2rz3hy"alt="No Image Loaded"/></div><br/></div></body></html>

The only javascript is embedded in the tags, but could easily be moved to script tags for more flexibility.

JavaScript Free

Making A Simple Javascript Image Gallery

Solution 1:

Solution 2:

Post a Comment for "Making A Simple Javascript Image Gallery"