How To Replace Main Image By Clicking On Thumb Image?

Do you require to replace or alter your main picture on click on text or other tiny images to make it like slider then check out our snippet to replace main picture by clicking on thumb picture?

Now there’s lots of obtainable only but not features are ok to make use of them because you need to watch out your loading time so think two times before using the codes on your web that can make your loading time high of bad SEO effect. But this is light weight & must bunch of codes. All is here you you also do not must hit any others URLs. Now go for it & garb the code to make use of it.

Features:

1.) Pure JavaScript Code.
2.) No External JavaScript Or JQuery File.
3.) HTML Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JavaScript:

<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>

HTML:

<div id="main_img">
 <img id="img" src="https://placehold.it/110x110">
</div>
<div id="thumb_img">
 <img src='https://placehold.it/120x60' onclick='changeImage("http://placehold.it/120x60");'>
 <img src='https://placehold.it/130x60' onclick='changeImage("http://placehold.it/130x60");'>
 <img src='https://placehold.it/140x60' onclick='changeImage("http://placehold.it/140x60");'>
</div>

Customization:

1.) Edit Your HTML As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…