Making a simple javascript Image gallery


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 change. For this part I was thinking I would just use javaScript instead of Jquery just to keep it simple. I'm not too familiar with the javaScript syntax but this is my attempt to get started. Is this a feasible way to create an image gallery? I know making the images the background isn't a great idea, but for testing purposes I don't feel like cropping images -- so setting the image as the background trims the images to fit.

I was also trying to think about how to set the ImageCnt to zero initially... Can an onload function be used to set the ImageCnt to 0 when the page loads? Can a var be passed into next()? If so, I could pass the current ImageCnt from the onClick to the function.

PS. I've omitted a lot of code to keep it simple to read, but I can provide more if it's necessary.

Thanks! here's my code:


<script> function next() { var myImage= new Array(); myImage[0]="penguins.jpg"; myImage[1]="desert.jpg"; myImage[2]="jellyfish.jpg"; myImage[3]="flower.jpg"; ImageCnt++; document.getElementById("whiteBox").style.background = 'url(myImage[ImageCnt])'; } </script>


<a href="#" onclick="next()"><img src="next.png"/></a>


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= new Array(); myImage[0]="penguins.jpg"; myImage[1]="desert.jpg"; myImage[2]="jellyfish.jpg"; myImage[3]="flower.jpg"; var ImageCnt = 0; function next(){ ImageCnt++; document.getElementById("whiteBox").style.background = 'url(' + myImage[ImageCnt] + ')'; } </script>

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

<a href="#" onclick="next();return false;"><img src="next.png"/></a>


This is the best example of a simple inline non-jQuery image gallery that I've found, obtained from <a href="http://extremestudio.ro/create-a-html-photo-gallery-valid-for-all-browsers/" rel="nofollow">http://extremestudio.ro/</a>:

<!DOCTYPE html PUBLIC> <html> <head> <title> Simple and Effective Photo Gallery with HTML and JavaScript </title> <style type="text/css"> body { background: #222; margin-top: 20px; } h3 { color: #eee; font-family: Verdana; } .thumbnails img { height: 80px; border: 4px solid #555; padding: 1px; margin: 0 10px 10px 0; } .thumbnails img:hover { border: 4px solid #00ccff; cursor:pointer; } .preview img { border: 4px solid #444; padding: 1px; width: 400px; } </style> </head> <body> <div class="gallery" align="center"> <h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/> <div class="thumbnails"> <img onmouseover="preview.src=img1.src" id="img1" src="http://bit.ly/2rz3hy" alt="Image Not Loaded"/> <img onmouseover="preview.src=img2.src" id="img2" src="http://bit.ly/1ug1e6" alt="Image Not Loaded"/> <img onmouseover="preview.src=img3.src" id="img3" src="http://bit.ly/1yIAYc" alt="Image Not Loaded"/> <img onmouseover="preview.src=img4.src" id="img4" src="http://bit.ly/2LHyDW" alt="Image Not Loaded"/> <img onmouseover="preview.src=img5.src" id="img5" src="http://bit.ly/2wyHSR" alt="Image Not Loaded"/> <img onmouseover="preview.src=img6.src" id="img6" src="http://bit.ly/yRo1i" alt="Image Not Loaded"/> </div><br/> <div class="preview" align="center"> <img id="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.


  • How to write a constructor that contains a boolean value?
  • droidtext adding image doesn't work
  • How to fully fit an image inside carousel(Bootstrap)
  • ActiveSupport::Deprecation.silenced = true does not works for me?
  • How to handle null values in Angular
  • How to hide an image using transparent rectangle in QML?
  • Alternating Item Style
  • Embed an image in a TreeNode
  • Google Custom Search Api keeps giving me “usageLimits” error
  • Python Pillow: Make gradient for transparency
  • Problems using HOGDescriptor
  • Different SSL-certificates for different parts of site
  • How can I stop .htaccess redirecting a subdomain to the main site?
  • Httpclient multipart/form-data post image and json same time
  • Give wx.StaticBitmap a transparent background? wxpython
  • Intent Image Capture data==null
  • C# Remove URL from String
  • PHP Copy function not working
  • How to set download location via chrome api
  • PHP file_exists() anomaly
  • MVVM: Image Bind Source from FileOpenPicker
  • Are there any issues with placing image as background on an extended JFrame?
  • Syntax for setting draggablecursor property in google maps api
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • Resize panoramic image to fixed size
  • Importing jscolor library in angular 2
  • Rearranging Cells in UITableView Bug & Saving Changes
  • A cron job substitute?
  • Benchmarking RAM performance - UWP and C#
  • Angular 2 constructor injection vs direct access
  • embed rChart in Markdown
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal