No onClick, just automatic change of image and caption every second.
Here's the code I have so far:
HTML:
<div class="col-md-6">
<h2>Fishing Slide Show</h2>
<h4 id="caption">Casting on the Upper Kings</h4>
<img id="slide" src="images/casting1.jpg" alt="" height="200px">
<div id="slides">
<img src="images/casting1.jpg" alt="Casting on the Upper Kings" height="200px">
<img src="images/casting2.jpg" alt="Casting on the Lower Kings" height="200px">
<img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn" height="200px">
<img src="images/fish.jpg" alt="Catching on the South Fork" height="200px">
<img src="images/lures.jpg" alt="The Lures for Catching" height="200px">
</div>
</div>
And this is my Javascript:
var img_array = ["images/casting1.jpg", "images/casting2.jpg"
,"images/catchrelease.jpg", "images/fish.jpg"
,"images/lures.jpg"];
var alt_array = ["Casting on the Upper Kings", "Casting on the Lower Kings",
"Catch and Release on the Big Horn", "Catching on the South Fork",
"The Lures for Catching"];
var currImg = 0;
var currAlt = 0;
function slideShow();{
img.src = img_array[index++, img_array.length];
img.alt = alt_array[index++, alt_array.length];
//document.getElementById("slides").src = img_array[currImg];
//document.getElementById("slides").alt = alt_array[currAlt];
}
let stop = setInterval(slideShow, 1000);
Here's a simple slideshow I made.
You simply have the first slide have the active tab, then you use .nextElementSibling to get the next slide.
function runSlideshow() {
const current = document.querySelector(".slide.current");
current.classList.toggle("current");
current.nextElementSibling ?
current.nextElementSibling.classList.toggle("current") :
clearInterval(slideshow);
}
const slideshow = setInterval(runSlideshow, 2000);
.slide {
height: 200px;
display: none;
}
.slide.current {
display: block;
}
<div id="container">
<img class="slide current" src="https://cataas.com/cat/6136c137ebad510011b54b90" />
<img class="slide" src="https://cataas.com/cat/6136be59ebad510011b54b88" />
<img class="slide" src="https://cataas.com/cat/61307aa542fcca001bb841f5" />
<img class="slide" src="https://cataas.com/cat/6123cb0fe8503700118bdb62" />
<img class="slide" src="https://cataas.com/cat/6120c8103a342d0013920e23" />
</div>
Related
I have some images as shown in the layout here.
Currently all images are showing at once. What I want instead is to show only single row of images at a time, I would like to have an animation, when user scolls, then show another row and hide previous one, similariy next scrolling show next row. In case if user scroll upwards, we need to show images from previous row. Like that.
Can't get a clue on how to achieve it. Here, is my current code.
.parallax-window {
min-height: 400px;
background: transparent;
}
.service-box-container{
display: grid;
grid-template-columns: repeat(6, 2fr);
gap: 15px;
}
.service-box-container .service-box{
grid-column: span 2;
}
.service-box-container .service-box:nth-child(5n+4), .service-box-container .service-box:nth-child(5n+5) {
grid-column: span 3;
}
.service-box-container img{
max-width: 100%;
width: 100%;
object-fit: cover;
object-position: center;
height: 460px;
border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<div class="service-box-container parallax-window" data-parallax="scroll" data-image-src="https://www.fillmurray.com/640/360">
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
</div>
<script>
$(document).ready(function(){
$('.parallax-window').parallax({});
});
</script>
#PS: I have used parallax js as well, so I would love to keep those parallax effect as well.
Here is the jsfiddle.
Something like the following might be what you are looking for.
Note: You should run the following snippet in "Full-page" mode.
<!doctype html>
<html>
<head>
<title>Test</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<style>
#scrollbox {
overflow-y: scroll;
overflow-x: auto;
background-color: #eee;
float: left;
}
.service-box {
margin: 10px;
text-align: center;
}
.service-box img {
margin: 0px;
}
</style>
</head>
<body>
<div id="scrollbox">
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img alt="Fourth of July 2022" height="200" src="https://google.com/logos/doodles/2022/fourth-of-july-2022-6753651837109457-law.gif" title="Fourth of July 2022" width="500">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
<div class="service-box">
<img src="https://www.fillmurray.com/640/360" class="" alt="">
</div>
</div>
<script>
// When we get to within 30 pixels of the bottom of a row,
// we show the next row:
const THRESHOLD = 30;
window.onload = function() {
let s = document.getElementById('scrollbox');
let children = s.children;
let scrollHeight;
let maxHeight = 0;
let maxWidth = 0;
for (let i = 0; i < children.length; ++i) {
let child = children[i];
let style = child.currentStyle || window.getComputedStyle(child);
if (i === 0) {
scrollHeight = child.offsetTop - parseInt(style.marginTop);
}
let heightWithoutMargins = parseInt(style.height) +
parseInt(style.paddingTop) +
parseInt(style.paddingBottom) +
parseInt(style.borderTop) +
parseInt(style.borderBottom);
let totalHeight = heightWithoutMargins + parseInt(style.marginTop) + parseInt(style.marginBottom);
if (totalHeight > maxHeight) {
maxHeight = totalHeight;
}
let widthWithoutMargins = parseInt(style.width) +
parseInt(style.paddingLeft) +
parseInt(style.paddingRight) +
parseInt(style.borderLeft) +
parseInt(style.borderRight);
let totalWidth = widthWithoutMargins + parseInt(style.marginLeft) + parseInt(style.marginRight);
if (totalWidth > maxWidth) {
maxWidth = totalWidth;
}
child.top = child.offsetTop - scrollHeight;
child.bottom = child.top + heightWithoutMargins - THRESHOLD;
child.marginTop = parseInt(style.marginTop);
child.style.visibility = 'hidden';
}
s.style.height = maxHeight + 'px';
// Allow for the scrollbar:
s.style.width = (maxWidth + 18) + 'px';
let currentVisible = null;
let currentY = 0;
s.onscroll = function() {
let yTop = s.scrollTop;
let yBottom = yTop + maxHeight;
// Find all visible:
let visible = [];
for (let i = 0; i < children.length; ++i) {
let child = children[i];
let top = child.top;
let bottom = child.bottom;
if ((top >= yTop && bottom < yBottom) || (top< yTop && bottom > yTop)) {
visible.push(children[i]);
}
}
if (currentVisible) {
currentVisible.style.visibility = 'hidden';
}
if (visible.length) {
currentVisible = yTop >= currentY ? visible.pop() : visible[0];
currentVisible.style.visibility = 'visible';
}
else {
currentVisible = null;
}
currentY = yTop;
};
s.onscroll(); // kick things off
};
</script>
</body>
</html>
window.addEventListener('scroll', function () {
console.log(scrollY); //You will see numbers increasing and decreasing in console
if(scrollY === yournecessarynumber) {
// For appearing the necessary height in the window.innerHeight
// If you replace with yournecessarynumber with number the function below will start working after reacing that number and animate your element with appearing from bottom and opacity
element.style.transform: 'scale(1), translateY(0)',
element.style.display: 'block'
}
})
// You should use it for recognizing the style and giving alter in animation
element.style.transform: 'scale(0), translateY(1000%)',
element.style.display: 'none'
I have 4 image slideshows, and I am having trouble with the Javascript. I have given the div both an id and a class name. The class imageContainer is used in the CSS. Therefore I am using id for the Javascript, but it won't work. I can do this with one image slideshow, but I need to have multiple slideshows on the same page.
The HTML code below is not my actual code, it is just placeholder code I wrote to show what I want to achieve. The Javascript code, however, is my actual code.
I appreciate the help.
function openWin(url) {
aWindow = window.open(url, "Window 1", "width=400, height=400");
}
var numslides = 0,
currentslide = 0;
var slides = new Array();
function MakeSlideShow() {
container = document.getElementsById("Gallery");
for (i = 0; i < imgs.length; i++) {
if (imgs[i].className != "imga") continue;
slides[numslides] = imgs[i];
if (numslides == 0) {
imgs[i].style.display = "block";
} else {
imgs[i].style.display = "none";
}
imgs[i].onclick = NextSlide;
numslides++;
}
}
function NextSlide() {
slides[currentslide].style.display = "none";
currentslide++;
if (currentslide >= numslides) currentslide = 0;
slides[currentslide].style.display = "block";
}
window.onload = MakeSlideShow;
<h2>Gallery 1</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/100" />
<img class="img" src="https://via.placeholder.com/101" />
<img class="img" src="https://via.placeholder.com/102" />
<img class="img" src="https://via.placeholder.com/103" />
</div>
<h2>Gallery 2</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/106" />
<img class="img" src="https://via.placeholder.com/107" />
<img class="img" src="https://via.placeholder.com/108" />
<img class="img" src="https://via.placeholder.com/109" />
</div>
<h2>Gallery 3</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/110" />
<img class="img" src="https://via.placeholder.com/111" />
<img class="img" src="https://via.placeholder.com/112" />
<img class="img" src="https://via.placeholder.com/113" />
</div>
<h2>Gallery 4</h2>
<div id="Gallery" class="imageContainer">
<img class="img" src="https://via.placeholder.com/114" />
<img class="img" src="https://via.placeholder.com/115" />
<img class="img" src="https://via.placeholder.com/116" />
<img class="img" src="https://via.placeholder.com/117" />
</div>
ID's must be unique, so, the best way to do this is get all galleries by their class name and start getting images from there. Note that slides is now a bidimensional array to hold gallery and images, something like:
slides[0] = [image100, image101, image102, image103];
I've added indexes for gallery and image to each picture using dataset propperty, so, you only need to know wich image was clicked instead of trying to get from currentslide. Also, numslides is provided from gallery length.
var slides = new Array();
function MakeSlideShow()
{
var containers = document.getElementsByClassName("imageContainer");
for(var x = 0; x < containers.length; x++) {
// Create gallery
slides[x] = new Array();
var imgs = containers[x].children;
for(var i = 0; i < imgs.length; i++) {
// Add image to current gallery
slides[x][i] = imgs[i];
// Set it's display, note that at least 1 images was added
if(slides[x].length == 1) {
imgs[i].style.display = 'block';
} else {
imgs[i].style.display = 'none';
}
// Add gallery and image info
imgs[i].dataset.gallery = x;
imgs[i].dataset.img = i;
// Add onclick event, but we need to send current image
imgs[i].onclick = function() {
nextSlide(this);
}
}
}
}
// This function needs to know wich img was clicked
function nextSlide(pic)
{
// Get gallery and image from dataset to know what to do
var gallery = pic.dataset.gallery;
var img = pic.dataset.img;
// Hide current image
slides[gallery][img].style.display = 'none';
// Search for next
img ++;
// No more images availabel, go to first
if(img == slides[gallery].length) {
img = 0;
}
// Show next image
slides[gallery][img].style.display = 'block';
}
window.onload = MakeSlideShow;
<h2>Gallery 1</h2>
<div id="Gallery1" class="imageContainer">
<img class="img" src="https://via.placeholder.com/100" />
<img class="img" src="https://via.placeholder.com/101" />
<img class="img" src="https://via.placeholder.com/102" />
<img class="img" src="https://via.placeholder.com/103" />
</div>
<h2>Gallery 2</h2>
<div id="Gallery2" class="imageContainer">
<img class="img" src="https://via.placeholder.com/106" />
<img class="img" src="https://via.placeholder.com/107" />
<img class="img" src="https://via.placeholder.com/108" />
<img class="img" src="https://via.placeholder.com/109" />
</div>
<h2>Gallery 3</h2>
<div id="Gallery3" class="imageContainer">
<img class="img" src="https://via.placeholder.com/110" />
<img class="img" src="https://via.placeholder.com/111" />
<img class="img" src="https://via.placeholder.com/112" />
<img class="img" src="https://via.placeholder.com/113" />
</div>
<h2>Gallery 4</h2>
<div id="Gallery4" class="imageContainer">
<img class="img" src="https://via.placeholder.com/114" />
<img class="img" src="https://via.placeholder.com/115" />
<img class="img" src="https://via.placeholder.com/116" />
<img class="img" src="https://via.placeholder.com/117" />
</div>
I have multiple containers with content blocks within them. I've got two a functions that activate by clicking on a button left or right of the container which will scroll it left or right. These two functions work fine for the first container but since I've got four more of these containers that I want to be able to scroll there has to be a simpler way to write these functions to be compatible with all five containers.
I could always copy and paste the same code four more times but that makes for very ugly and redundant code because the only thing that changes is the class of the container that has to be scrolled.
I'm hoping some more experienced front-enders would be able to help me rewrite these functions. I'm not as advanced of a coder so I'm struggeling coming up with a good solution.
Also another problem is that the functions that make the scrolling possible aren't entirely my own code. I found most of it online somewhere and only altered it slightly to make it work for my website. So I'm not exactly sure how all of these statements work, only roughly.
As a possible solution I thought maybe have an array that stores the class names of the containers and have them be pasted in where I do .querySelector to get the class. But sadly I couldn't get that to work the way I wanted it to.
<!-- example code -->
<div>
<h1>Container title</h1>
<div>
<button id="scrollLeft1" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight1" type="button">></button>
</div>
</div>
<div>
<h1>Container title 2</h1>
<div>
<button id="scrollLeft2" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight2" type="button">></button>
</div>
</div>
var buttonOne = document.querySelector("#scrollLeft1");
var buttonTwo = document.querySelector("#scrollRight1");
var buttonThree = document.querySelector("#scrollLeft2");
var buttonFour = document.querySelector("#scrollRight2");
function scrollRight() {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft += 10;
scrollAmount += 10;
if(scrollAmount >= 700){
window.clearInterval(slideTimer);
}
}, 5);
};
function scrollLeft() {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft -= 10;
scrollAmount += 10;
if(scrollAmount >= 700){
window.clearInterval(slideTimer);
}
}, 5);
};
buttonOne.addEventListener("click", scrollLeft);
buttonTwo.addEventListener("click", scrollRight);
buttonThree.addEventListener("click", scrollLeft);
buttonFour.addEventListener("click", scrollRight);
I have created a version of your code which should be reusable between the different containers and also left some comments for better understanding of what is going on.
// create an array with all buttons that scroll left
var leftScrollButtons = document.querySelectorAll("#scrollLeft1, #scrollLeft2, #other-btn-id, .other-btn-class");
// create another array with all buttons that scroll right
var rightScrollButtons = document.querySelectorAll("#scrollRight1, #scrollRight2, #other-btn-id, .other-btn-class");
// create a default configuration object
var configDefault = {
direction: 1, // use 1 for right, -1 for left
amount: 10,
interval: 5,
threshold: 700
}
// scrolling function will use the configuration object for the information that it needs
function horizontalScroll(configObj) {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft += configObj.amount * configObj.direction;
scrollAmount += configObj.amount;
if(scrollAmount >= configObj.threshold){
window.clearInterval(slideTimer);
}
}, configObj.interval);
}
// will iterate over every item of the array (all buttons) and add a click event listener to them
leftScrollButtons.forEach(button => button.addEventListener("click", function(ev) {
var container = ev.currentTarget.parentElement.querySelector('.container');
// from the default configuration object, overrite what you need, in this case, the direction property
var configLeft = Object.assign({}, configDefault, {direction: -1, container: container});
horizontalScroll(configLeft);
debug("Scrolled left", container); // used only for the demo
}));
// will iterate over every item of the array (all buttons) and add a click event listener to them
rightScrollButtons.forEach(button => button.addEventListener("click", function(ev) {
var container = ev.currentTarget.parentElement.querySelector('.container');
// from the default configuration object, overrite what you need, in this case, no need to overrite anything here
var configRight = Object.assign({}, configDefault, {container: container});
horizontalScroll(configRight);
debug("Scrolled right", container); // used only for the demo
}));
// only used for the demo
function debug(action, container) {
var actionSpan = document.querySelector('.action-span');
actionSpan.innerText = action;
var containerSpan = document.querySelector('.container-span');
containerSpan.innerText = container.parentElement.previousElementSibling.innerText;
}
<!-- to test the demo -->
<p>Last action: <span class="action-span"></span></p>
<p>Container: <span class="container-span"></span></p>
<!-- example code -->
<div>
<h1>Container title</h1>
<div>
<button id="scrollLeft1" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight1" type="button">></button>
</div>
</div>
<div>
<h1>Container title 2</h1>
<div>
<button id="scrollLeft2" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight2" type="button">></button>
</div>
</div>
Goal: When image A is clicked that same image appears at the bottom of the page. Needs to work for more than one image.
When image A is clicked I need image B to now have the same src as image A.
Or to Generate a copy of the clicked image.
This should also be able to work for several pictures.
So for example if I clicked 5 images (Image A-01, A-02, A-03, A-04, A-05) on the screen....
At the bottom of the page there should be those 5 images
I've tried
HTML:
<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">
JS
$(function(){
$("#myImage").click(function() {
$("#new").attr("src","http://placehold.it/150")
});
});
Which works to replace one image but I need the same code to work for multiple image clicks.
Another proposal with an event listener.
var imgCount = 5,
i;
for (i = 1; i <= 5; i++) {
document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false);
}
function setImg(id) {
return function () {
var img = document.createElement('img');
if (imgCount) {
imgCount--;
img.src = document.getElementById(id).src;
document.getElementById('footer').appendChild(img);
};
}
}
<img id="img1" src="http://lorempixel.com/200/100/city/1" />
<img id="img2" src="http://lorempixel.com/200/100/city/2" />
<img id="img3" src="http://lorempixel.com/200/100/city/3" />
<img id="img4" src="http://lorempixel.com/200/100/city/4" />
<img id="img5" src="http://lorempixel.com/200/100/city/5" />
<div id="footer"></div>
This will help you out
function changeSrc(id){
document.getElementById('footer').src = document.getElementById(id).src;
}
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/>
<img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/>
<img src="" height="200" width="auto" id="footer" class="image" />
Try this:
<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a">
<br>
<div id="sectionB">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
</div>
<br>
<button id="reset">Reset</button>
===
$(function() {
$('.a').click(function() {
var img = $(this).attr('src');
var index = $(this).index();
$('.b').eq(index).attr('src', img);
})
$('#reset').click(function(){
$('.b').attr('src', 'http://placehold.it/48');
})
})
DEMO: https://jsfiddle.net/j359yfor/
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>