From API I’m getting array of images and when requesting the API second time I’m getting another array of different images. When press the button I want to add an images array to the bootstrap gallery and when press again I want to add second array into another gallery. I don’t understand how reuse the same bootstrap html template and create different image galleries in the same html page.
API object:
{
"title": "rodeo",
"author": "consectetur",
"images": [
"http://example/photo.jpg",
"http://example/photostwo.jpg",
"http://example/photosone.jpg"
],
"year": "1998"
}
<div>
<div id="container"></div>
<button id="dataBtn"></button>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
function test(){
const carouselItem = document.querySelector('.carousel-item');
function create(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
for (image of data.images) {
let img = create('img');
img.classList.add(‘d - block’, ‘w - 100’);
img.src = image;
append(carouselItem, img);
}
}
test();
document.getElementById("dataBtn").addEventListener("click", test);
With bootstrap, those tasks would be much more easier using jQuery Framework! As you are mentioning only Javascript in your Question' tags, This is a method showing how we could do it is in pure Javascript that you could easily include in your project.
We clone the Carousel container, then we fill the dynamically added clones with new pictures.
//An initial status we could check later
var initial = true;
//A global counter that could be used to distinguish between non-DOM duplicates
let i = 0;
function test() {
//Here A random array of pics would be used
//Just to simulate an API call
var rand = Math.floor(Math.random() * Math.floor(2));
var pix = JSON.parse('{"data":[{"title":"rodeo","author":"consectetur","images":["https://images.unsplash.com/photo-1533522688752-ef641aa0607b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1550543941-281cef85c281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1565291707930-351bfd98e772?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60"],"year":"1998"},{"title":"Flasher","author":"Photo Addict","images":["https://images.unsplash.com/photo-1516724562728-afc824a36e84?ixlib=rb-1.2.1&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1516962126636-27ad087061cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=125&q=80","https://images.unsplash.com/photo-1518890414976-bb41382be43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=80"],"year":"2020"},{"title":"Domotics","author":"iOting","images":["https://images.unsplash.com/photo-1528255671579-01b9e182ed1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1494351416886-f6b4ed2a1d68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1547938094-b000547cbeb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60"],"year":"2020"}]}');
const carouselItem = document.querySelector('.carousel-item');
function create(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
var model = document.getElementById('carouselExampleControls');
function duplicate() {
i++;
//We clone the default laoded Gallery container
var clone = model.cloneNode(true);
clone.id = "cloneGallery" + i;
model.parentNode.appendChild(clone);
//We identify the dynamically newly added picture container
var clItem = document.getElementsByClassName('carousel-item')[i];
//We empty it... so we could replace by new pics
clItem.innerHTML = '';
for (image of pix.data[rand].images) {
var img = create('img');
img.classList.add('d-block', 'w-100');
img.src = image;
append(clItem, img);
}
}
if (initial) {
for (image of pix.data[rand].images) {
var img = create('img');
img.classList.add('d-block', 'w-100');
img.src = image;
append(carouselItem, img);
}
} else {
duplicate();
}
initial = false;
}
document.getElementById("dataBtn").addEventListener("click", test);
<div>
<div id="container"></div>
<button id="dataBtn">Add Pictures!</button>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Try it..
Result Size: 497 x 476
<html>
<title>Multiple slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%">
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">❯</button>
</div>
<div class="w3-content w3-display-container">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">❯</button>
</div>
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showDivs(1, 0);
showDivs(1, 1);
function plusDivs(n, no) {
showDivs(slideIndex[no] += n, no);
}
function showDivs(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
Related
I made a slider with a series of images. I created two buttons (prev and next) that allow browsing the images.
I created also two divs where I put the slide's number and title.
My goal is to change the image, number, and title of the slide simultaneously each time a click event on prev or next buttons occurs.
I have started programming some months ago and I am having difficulties associating images with corresponding titles and numbers.
Could someone help me complete my code?
Actually, the following code works for me to show the image on click but is not complete.
I would like to change all the elements (image, title and number) at the same time after click.
More details on the picture:Screen of the homepage
// Carousel
let sliderImage = document.querySelector(".sliderImage");
let images = [
"carousel1.jpg",
"carousel2.jpg",
"carousel3.jpg",
"carousel4.jpg",
"carousel5.jpg",
"carousel6.jpg",
"carousel7.jpg",
];
let i = 0; // Current image index
// I have already created in html file 2 btns with "onclick" event
// that trigger the following functions:
function prev() {
if (i <= 0) i = images.length;
i--;
return getSlideImg();
}
function next() {
if (i >= images.length - 1) i = -1;
i++;
return getSlideImg();
}
function getSlideImg() {
return sliderImage.setAttribute("src", "img/" + images[i]);
}
<!-- Carousel -->
<div class="carousel-container">
<div class="carousel-slide">
<img src="./img/carousel1.jpg" alt="" class="sliderImage"/>
<!-- Carousel card -->
<div class="carousel__card-container">
<div class="carousel__card-title">Soggiorno</div>
<div class="carousel__slide-data">
<div class="slide__number">01</div>
<div class="slide__loader">
<div class="loader__line-grey">
<div class="loader__line-white"></div>
</div>
</div>
</div>
</div>
<!-- Carousel buttons -->
<div class="carousel-btn">
<a href="#" class="button left-arrow bottone" id="prevBtn" onclick="prev()">
<i class="ri-arrow-left-s-line btn-icon-small"></i>
</a>
<a href="#" class="button right-arrow bottone" id="nextBtn" onclick="next()">
<i class="ri-arrow-right-s-line btn-icon-small"></i>
</a>
</div>
</div>
</div>
set all values inside getSlideImg function so everything will update with corresponding image
// Carousel
let sliderImage = document.querySelector(".sliderImage"),
container = document.querySelector(".carousel-container")
let images = [
"carousel1.jpg",
"carousel2.jpg",
"carousel3.jpg",
"carousel4.jpg",
"carousel5.jpg",
"carousel6.jpg",
"carousel7.jpg",
];
let i = 0; // Current image index
// I have already created in html file 2 btns with "onclick" event
// that trigger the following functions:
function prev() {
if (i <= 0) i = images.length;
i--;
return getSlideImg();
}
function next() {
if (i >= images.length - 1) i = -1;
i++;
return getSlideImg();
}
function getSlideImg() {
container.querySelector(".slide__number").innerText = i + 1
container.querySelector(".carousel__card-title").innerText = images[i]
return sliderImage.setAttribute("src", "img/" + images[i]);
}
// for onload
getSlideImg()
<!-- Carousel -->
<div class="carousel-container">
<div class="carousel-slide">
<img src="./img/carousel1.jpg" alt="" class="sliderImage"/>
<!-- Carousel card -->
<div class="carousel__card-container">
<div class="carousel__card-title">Soggiorno</div>
<div class="carousel__slide-data">
<div class="slide__number">01</div>
<div class="slide__loader">
<div class="loader__line-grey">
<div class="loader__line-white"></div>
</div>
</div>
</div>
</div>
<!-- Carousel buttons -->
<div class="carousel-btn">
<a href="#" class="button left-arrow bottone" id="prevBtn" onclick="prev()">
<i class="ri-arrow-left-s-line btn-icon-small">prev</i>
</a>
<a href="#" class="button right-arrow bottone" id="nextBtn" onclick="next()">
<i class="ri-arrow-right-s-line btn-icon-small">next</i>
</a>
</div>
</div>
</div>
Earlier I had scrollbar, where different icons were displayed. on click of particular icon, jsp page was displayed. but i need to replaced it with carousel.
on next/prev click following function should be called:
function testing(index) {
var tableLength = tableAddArray.length;
for (var i = 0; i < tableLength; i++) {
if (i == index) {
selectedElement= tableAddArray[i].id;
}
console.log("selectedElement:: "+selectedElement);
}
createElement();
}
function createElement() {
var request ="/xyzz/abcdd?objectName=";
var attributesToSend = "&action=add" ;
attributesToSend += "&ref="+document.getElementsByName("ref")[0].value ;
document.getElementsByName("action")[0].value = "add";
if (selectedElement != null) { request += selectedElement;
if (selectedElement == "1") {equest += "&condOp=5"; }
else if (selectedElement == "2") {request += "&dest=2";}
request += attributesToSend; location.href=request;
//from here other processing is done to get corresponding data from DB
}
}
then in carousel,:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item">
<c:choose>
<c:when test="${requestScope.objectName == '2'}">
<jsp:include page="2nd_Slide.jsp"></jsp:include> </c:when>
<c:when test="${requestScope.objectName == '3'}">
<jsp:include page="3rd_slide.jsp"></jsp:include> </c:when>
</c:choose>
</div>
<a class="carousel-control-prev" ..>
<a class="carousel-control-next" ..>
</div>
Hence i need to set objectname at 0th index as well. I dont know how to call js before 0th slide of carousel is shown.
You might wanna register an event handler on slide action of the carousel. Something like this
$('#carousel_id').on('slide.bs.carousel', function ()
//load jsp like before with click on icons
)
Set some id on the element that needs to trigger jsp load
NOTE: check out slid.bs.carousel for post slide event handling
EDIT:
Try:
<div id="carouselExampleControls" class="carousel slide" data- ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p class="d-block w-100">
Slide 1
<div id="jspdiv1"></div>
</p>
</div>
<div class="carousel-item">
<p class="d-block w-100">
Slide 2
<div id="jspdiv2"></div>
</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
var ind = 0;
$('#carouselExampleControls').bind('slid.bs.carousel', function (e) {
if(e.direction =='right'){
ind++;
console.log("right "+ind);
$("#jspdiv1").text("Slided right "+ind);
}
else if(e.direction == 'left'){
ind--;
console.log("left "+ind);
$("#jspdiv2").text("Slided left "+ind);
}
console.log(e);
});
</script>
Below is the HTML Code and I want to fetch image src and image name which is mentioned in h4 tag class="prdtTitle" as well as Image src in Jquery fancy box.
I am using below Fancy box:
/*!
* fancyBox - jQuery Plugin
* version: 2.1.5 (Fri, 14 Jun 2013)
* #requires jQuery v1.6 or later
*
* Examples at http://fancyapps.com/fancybox/
* License: www.fancyapps.com/fancybox/#license
*
* Copyright 2012 Janis Skarnelis - janis#fancyapps.com
*
*/
<div class="col-sm-4">
<div class="prdtitem add-to-cart" id="black-thunder">
<a href="#cart" title="glittek" onclick="addToCart(this)">
<div class="enqry-cart pull-left">
<i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
<span class="pull-left">add to enquiry cart</span>
</div>
</a>
<div class="zoom">
<a href="images/imperial-exotic-gold.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="slabs">
<img src="images/imperial-exotic-gold.jpg" alt="imperial-exotic-gold" class="lazy-loaded" />
</a>
</div>
<h4 class="prdtTitle">Imperial Exotic Gold</h4>
</div>
</div>
<div class="col-sm-4">
<div class="prdtitem add-to-cart">
<a href="#cart" title="glittek" onclick="addToCart(this)">
<div class="enqry-cart pull-left">
<i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
<span class="pull-left">add to enquiry cart</span>
</div>
</a>
<div class="zoom">
<a href="images/golden-juprana.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="slabs">
<img src="images/golden-juprana.jpg" alt="golden-juprana" class="lazy-loaded"/>
</a>
</div>
<h4 class="prdtTitle">Golden Juparana</h4>
</div>
</div>
<div class="col-sm-4">
<div class="prdtitem add-to-cart">
<a href="#cart" title="glittek" onclick="addToCart(this)">
<div class="enqry-cart pull-left">
<i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
<span class="pull-left">add to enquiry cart</span>
</div>
</a>
<div class="zoom">
<a href="images/colombo-juparana.jpg" title="glittek" class="lazy-img thumbimg fancybox" rel="slabs">
<img src="images/colombo-juparana.jpg" alt="colombo-juparana" class="lazy-loaded"/>
</a>
</div>
<h4 class="prdtTitle">Colombo Juparana</h4>
</div>
</div>
Jquery code,
beforeShow: function (opts) {
var current = F.current,
text = current.title,
type = opts.type,
title,
target;
if ($.isFunction(text)) {
text = text.call(current.element, current);
}
if (!isString(text) || $.trim(text) === '') {
return;
}
title = $('<div class="fancybox-title fancybox-title-' + type + '-wrap"></div><b>' + text + '</>');
switch (type) {
case 'inside':
target = F.skin;
break;
case 'outside':
target = F.wrap;
break;
case 'over':
target = F.inner;
break;
default: // 'float'
target = F.skin;
title.appendTo('body');
if (IE) {
title.width( title.width() );
}
title.wrapInner('<span class="child"></span>');
//Increase bottom margin so this title will also fit into viewport
F.current.margin[2] += Math.abs( getScalar(title.css('margin-bottom')) );
break;
}
title[ (opts.position === 'top' ? 'prependTo' : 'appendTo') ](target);
}
};
<script>
$(document).ready(function(){
$( ".zoom" ).each(function() {
var image_src = $(this).find('img').attr("src");
console.log(image_src);
var str = image_src.split("").reverse().join("");
var str1 = str.substring(str.lastIndexOf(".")+1,str.lastIndexOf("/"));
var image_name = str1.split("").reverse().join("");
console.log(image_name);
});
});
</script>
So I have an image with a glyphicon lying on top of it. On click, I want to change the image and the glyphicon. More clicking should just switch them back and forth between the two states.
(imgA + glyphiconA <--click--> imgB + glyphiconB)
I used to have the image chaning on click working, but when I tried to add in changing the glyphicon with it, it began to have issues.
Currently, I can click the glyphicon and it will switch to the second image but the glyphicon won't change and upon further clicking it will not switch back to the original image.
NOTE: it's currently a one-image carousel, more will be added later so I need to keep this functionality with the fix
var image_tracker1 = 'main';
function click1() {
var image = document.getElementById('ImageButton1');
if(image_tracker1=='main'){
image.src = 'img/index-splash/1blur.jpg';
$(a).find(".glyphicon")
.removeClass("glyphicon-triangle-bottom")
.addClass("glyphicon-triangle-top");
image_tracker1 = 'blur';
}else{
image.src = 'img/index-splash/1main.jpg'
$(a).find(".glyphicon")
.removeClass("glyphicon-triangle-top")
.addClass("glyphicon-triangle-bottom");
image_tracker1 = 'main';
}
}
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
<div id="mySplash1Mobile" class="carousel-splash slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="//placehold.it/900x300/c69/f9c/?text=First%20slide" id="ImageButton1" width="100%">
</div>
</div>
<a class="glyphicon-read-more" href="#mySplash1Mobile">
<span class="glyphicon glyphicon-triangle-bottom" id="ImageButton1" onClick="click1();" aria-hidden="true" ></span>
<span class="sr-only">More</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
You can remove the onclick from the span and put it in the link tag itself. Like change
<a class="glyphicon-read-more" href="#mySplash1Mobile">
to
<a class="glyphicon-read-more" href="javascript:click1();">
And in your js, change
$(a).find(".glyphicon") to $('a').find(".glyphicon")
I ultimately fixed it by toggling rather than removing classes.
Javascript:
var image_tracker1 = 'main';
function click1() {
var image = document.getElementById('ImageButton1');
if(image_tracker1=='main'){
image.src = 'img/index-splash/1blur.jpg';
$('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
image_tracker1 = 'blur';
}else{
image.src = 'img/index-splash/1main.jpg';
$('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
image_tracker1 = 'main';
}
}
HTML:
<div id="mySplash1Mobile" class="carousel-splash slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="img/index-splash/1main.jpg" id="ImageButton1" width="100%">
</div>
</div>
a class="glyphicon glyphicon-triangle-bottom glyphicon-read-more" href="javascript:click1();" id="GlyphiconButton1">
<span class="sr-only">More</span>
</a>
</div>
I have the main image and a zoom icon for it and I have an image next to the first image. I wanna write a JavaScript code where when I click on the second image it changes the first image scr and the zoom icon's href link I found a code for it, but I can't make it work. This is the code I have so far:
<script type="text/javascript">
function change(menuId, image, newImage, newUrl)
{
var img = document.getElementById(image);
img.src = newImage;
document.getElementById('d3').href = newUrl;
}
</script>
and i tried to do make it work like that
<script type="text/javascript">
function change(menuId, image, newImage, newUrl)
{
var img = document.getElementById(image);
img.src = newImage;
document.getElementById('d3').href = newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt=""/>
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span></a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage("assets/example/latest/S8621A.png")' >
<img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById'("d3").href = '(assets/example/latest/S8621B.png)'>
</div></div>
I just don't know how it should work. I really don't understand that whole JavaScript. Can someone help me or show me how will it work? THX for the help.
As others have already said, change() should be changeImage() or vice versa.
There was no obvious target for the MenuId parameter so it's removed.
Made the zoomImage() function just for the hell of it.
Click any of the bottom images and the top one changes and the GO link's href changes as well.
The zoom icon will enlarge the top image by 50% without leaving the page.
Added 2 more functions…not sure what OP wants.
imageZoom() will use transform: scale() to zoom the image.
resetImage() will reset the image back to 128px
Snippet
img {
cursor: pointer;
}
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script type="text/javascript">
function changeImage(newImage, newUrl) {
var img = document.getElementById('img');
img.src = newImage;
document.getElementById('goto').href = newUrl;
return false;
}
function zoomImage() {
var img = document.getElementById('img');
if (img.style.width == "192px") {
img.style.width = "128px"
} else {
img.style.width = "192px";
}
return false;
}
function imageZoom() {
var img = document.getElementById('img');
if (img.style.width == "512px") {
img.style.transform = "scale(.25)";
} else {
img.style.transform = "scale(4)";
}
return false;;
}
function resetImage() {
var img = document.getElementById('img');
img.style.width = "0px";
img.style.transform = "scale(1)"
img.style.width = "128px";
return false;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="" width="128" />
<div class="caption">
<div class="ico-block">
<a id="goto" href="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">GO</a>
<a class="ico-big" href="#" id="d3" width="32" onclick="zoomImage();">
<img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/32/Zoom-In-icon.png" />
</a>
<a class="ico-zoom" href="#" id="3d" width="32" onclick="imageZoom();">
<img src="https://image.freepik.com/free-icon/zoom-in-pc_318-11477.jpg" width="32" />
</a>
</div>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='http://i44.tinypic.com/2uxz43b.jpg' onclick='changeImage("http://cnx.org/resources/b785d2ec9b6302264f1ed942f4ec1b822d6f7b4c/lena.jpg", "http://cnx.org/resources/b785d2ec9b6302264f1ed942f4ec1b822d6f7b4c/lena.jpg")' width="128">
<img src='http://www.log85.com/tmp/doc/img/perfectas/lenna/lenna1.jpg' onclick='changeImage("http://lh3.ggpht.com/_ERXQs5oLNgE/S01Ee_26lsI/AAAAAAAAAlY/1T0Dl4QJiYk/s800/lenaV.jpg", "http://lh3.ggpht.com/_ERXQs5oLNgE/S01Ee_26lsI/AAAAAAAAAlY/1T0Dl4QJiYk/s800/lenaV.jpg")'
width="128">
<button onclick="resetImage();">RESET</button>
</div>
</div>
First you need to make sure the js function works.
Second, <img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById'("d3").href = '(assets/example/latest/S8621B.png)'> is not right, it should be
<img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById("d3").href = "assets/example/latest/S8621B.png"'> if my understanding is right.
Small description would be: you just need to assign clicked image to zoom icon to give it toggle effect.[that we doing by getElementById("d3") part
<script type="text/javascript">
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById("d3").href= newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt=""/>
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span></a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")'>
</div>
</div></div>
This should do it:
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById('d3').href = newUrl;
}
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt="" />
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span>
</a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")' onclick='document.getElementById' ( "d3").href='(assets/example/latest/S8621B.png)'>
</div>
</div>
Hey Robert Updated now
<!-- start: Portfolio -->
<section id="portfolio-grid" class="portfolio">
<article class="javascript html">
<script type="text/javascript">
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById('d3').href = newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt="" />
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span>
</a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")'>
</div>
</div>