Don’t worry I will show you how you can rework on an existing HTML photo slideshow code and turn into an exclusive photo gallery.
- (My virtual assistant wrote this whole page.)
Honestly speaking, one day ago I was also totally unaware of this great information when Francis (my employer) shared a video with me and discussed the possibilities of how we can embed several photos into one post.
At that moment both of us had no idea how to do this and we were not sure enough how to use these photos.
I have already watched many beautiful photo galleries while stumbling upon the web, so I researched web for “HTML photo slideshow code.”
In Just 5 minutes:The results of my research
As always, Google attacked me with several results having different codes including java, CSS, php etc.
Where to get the HTML photo slideshow code
I am not a proactive website designer, I just know some basics of HTML and CSS. Therefore, most of the search results bounced over my head.
I could not find an easier way to build an online photo gallery until I found this code which was the perfect result for my desire:
How the HTML code looks when you use it
How to use the code
Just copy the above code and paste into your HTML editor and play around with it little bit. It’s very easy to use and you don’t need any specialized HTML or CSS skills.
Here how you can use it easily:
- Upload to photos to your server and get the photo URLs
- Insert Photo URLs and descriptions into this HTML code
- If you want to add more photos just copy a
single line and past as many times as you need to. - There are many other options where you can
change the positions of buttons, captions and title text for the buttons.
How to Automatically Start the Slideshow on Page Load?
Here is the modified code if you want your slideshow to automatically start whenever a visitor lands on your page.
// Author: ideal-helper.com<br /><br /><br /><br /><br /><br /><br /><br /><br />
// Description: Photo slideshow to add your photos and embed into your website and blog post. </p><br /><br /><br /><br /><br /><br /><br /><br />
<p>var x=0;</p><br /><br /><br /><br /><br /><br /><br /><br />
<p>function rotate(num){<br /><br /><br /><br /><br /><br /><br /><br /><br />
fs=document.ff.slide;<br /><br /><br /><br /><br /><br /><br /><br /><br />
x=num%fs.length;<br /><br /><br /><br /><br /><br /><br /><br /><br />
if(x<0) x=fs.length-1;<br /><br /><br /><br /><br /><br /><br /><br /><br />
document.images.show.src=fs.options[x].value;<br /><br /><br /><br /><br /><br /><br /><br /><br />
fs.selectedIndex=x;}</p><br /><br /><br /><br /><br /><br /><br /><br />
<p>function auto() {<br /><br /><br /><br /><br /><br /><br /><br /><br />
if(document.ff.fa.value == “Stop”){<br /><br /><br /><br /><br /><br /><br /><br /><br />
rotate(++x);setTimeout(“auto()”, 2000);}}</p><br /><br /><br /><br /><br /><br /><br /><br />
<p>window.onload=function() document.ff.fa.value=”Stop”;auto();}<br /><br /><br /><br /><br /><br /><br /><br /><br />
</script></p><br /><br /><br /><br /><br /><br /><br /><br /><br />
<form name=”ff”><br /><br /><br /><br /><br /><br /><br /><br /><br />
<table cellpadding=”3″ style=”border:1px solid;border-collapse:collapse; border-color:#C0C0C0″><br /><br /><br /><br /><br /><br /><br /><br /><br />
<tr><br /><br /><br /><br /><br /><br /><br /><br /><br />
<th align=”center”>Ideal-helper’s Photo Gallery</th><br /><br /><br /><br /><br /><br /><br /><br /><br />
</tr><br /><br /><br /><br /><br /><br /><br /><br /><br />
<tr><br /><br /><br /><br /><br /><br /><br /><br /><br />
<td align=”center”><br /><br /><br /><br /><br /><br /><br /><br /><br />
<img src=”http://ecbiz178.inmotionhosting.com/~pennyp8/ideal-helper.com/wp-content/uploads/2016/02/photo-1.jpg” name=”show”><br /><br /><br /><br /><br /><br /><br /><br /><br />
</td><br /><br /><br /><br /><br /><br /><br /><br /><br />
</tr><br /><br /><br /><br /><br /><br /><br /><br /><br />
<tr><br /><br /><br /><br /><br /><br /><br /><br /><br />
<td align=”center” style=”border:1px solid; border-color:#C0C0C0″><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type=”button” onclick=”rotate(0);” value=”ll<<” title=”Jump to Start” /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type=”button” onclick=”rotate(x-1);” value=”Previous” title=”Previous photo” style=”width:80px;” /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type=”button” name=”fa” onClick=”this.value=((this.value==’Stop’)?’Start’:’Stop’);auto();” value=”Start Slidshow” title=”Auto-play” style=”width:150px;” /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type=”button” onclick=”rotate(x+1);” value=”Next” title=”Next Photo” style=”width:80px;” /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type=”button” onclick=”rotate(this.form.slide.length-1);” value=”>>ll” title=”Jump to end” /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</td><br /><br /><br /><br /><br /><br /><br /><br /><br />
</tr><br /><br /><br /><br /><br /><br /><br /><br /><br />
<tr><br /><br /><br /><br /><br /><br /><br /><br /><br />
<td align=”center” style=”border:1px solid; border-color:#C0C0C0″><br /><br /><br /><br /><br /><br /><br /><br /><br />
<select name=”slide” onChange=”rotate(this.selectedIndex);”><option value=”http://ecbiz178.inmotionhosting.com/~pennyp8/ideal-helper.com/wp-content/uploads/2016/02/photo-1.jpg”>Description for photo-1 </option><option value=”http://ecbiz178.inmotionhosting.com/~pennyp8/ideal-helper.com/wp-content/uploads/2016/02/photo-2.jpg”>Description for photo-2 </option><option value=”http://ecbiz178.inmotionhosting.com/~pennyp8/ideal-helper.com/wp-content/uploads/2016/02/photo-3.jpg”>Description for photo-3 </option><option value=”http://ecbiz178.inmotionhosting.com/~pennyp8/ideal-helper.com/wp-content/uploads/2016/02/photo-4.jpg”>Description for photo-4 </option></select><br /><br /><br /><br /><br /><br /><br /><br /><br />
</td><br /><br /><br /><br /><br /><br /><br /><br /><br />
</tr><br /><br /><br /><br /><br /><br /><br /><br /><br />
</table><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>
Can I use this text for my SBI! Website?
If you are a SBI! Website owner and using their Block builder-2 module for your website building, you can also use this HTML photo slideshow code in the same way.
- Upload your photos to the “Image Library”
- Copy the text and paste the text into a “Raw HTML Box”
Leave a Reply