a tech kat a tech kat - 1 month ago 10
HTML Question

How do I get to the current picture source of a slideshow?

Completely new to coding over here. Learning the basics.

How can I get to "the picture only", when clicking on a current picture of a slideshow?
Normally in html I would just put this around it:

<a href="image.jpg">Current picture </a>


But in this version I just don't seem to get it.
Clicking on the small pictures makes them appear as the big centred one.
Clicking on the big picture currently only pauses/continues the slideshow.

$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});

var counter=1;
$("#image"+counter).click();

$("#forward").click(function(){
counter = counter + 1;
if (counter>4){
counter=1;
}
$("#image"+counter).click();
})

$("#backward").click(function(){
counter=counter-1;
if (counter<1){
counter=4;
}
$("#image"+counter).click();
})

$("#bigImage").click(function(){
paused=!paused;
})




Picture of how it looks is on my post about it.
cliché image gallery

Thank you!

Full code

<html>
<head>
<title> FWP - Gallery </title>

<script src="jquery-3.1.1.min.js"></script>

<link rel="stylesheet"
type="text/css"
href="bootstrap.css">

<link rel="stylesheet"
type="text/css"
href="mystyles.css">

<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Gruppo">

<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Syncopate">

</head>

<body>

<div class="container">
<h1>Image Gallery</h1>

<div class="row">
<div class="col-md-3 thin_border">
<img id="image1"
class="crop-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image2"
class="crop-img"
src="after.jpg"
alt="after prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image3"
class="crop-img"
src="sleepy.jpg"
alt="Sleepy cat">
</div>
<div class="col-md-3 thin_border">
<img id="image4"
class="crop-img"
src="Cute.jpg"
alt="Cute cat">
</div>
</div>
<div class="row">
<div class="col-md-1 thin_border">
<button id="backward">&lt;</button>
</div>
<div class="col-md-10 thin_border">
<img id="bigImage"
class="big-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-1 thin_border">
<button id="forward">&gt;</button>
</div>
</div>
</div>



<script>
var paused=false;

setInterval(function(){
if(!paused){
$("#forward").click();
}
}, 3000);

$("#bigImage").click(function(){
paused=!paused;

});

$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;

$("#image"+counter).click();

$("#forward").click(function(){
counter = counter + 1;
if (counter>4) {
counter=1;
}
$("#image"+counter).click();
})

$("#backward").click(function(){
counter=counter-1;
if (counter<1) {
counter=4;
}
$("#image"+counter).click();
})

</script>


</body>


</html>

Answer

The section of javascript isn't vanilla javascript, it is a sample of this 'jquery' that you may have heard of in your quest to learn a bit of coding.

Jquery is syntactic sugar for javascript. $ is your cue to key in that this might be jquery (there are other js libraries that use $ syntax but I think jquery is the most prevalent).

$(".crop-img")
$("#bigImage")
$("#image"+counter)

This is jquery code to select an element from the page, the '.' is for selecting class, the '#' is for selecting id, there are tons of others you can look up as well. This gets you a jquery object that you can then save to a variable, call a method on, etc.

$(".crop-img").click(someFunctionNameHere);
$("#image"+counter).click();

These are examples of functions being called on the jquery objects, which happen to be event functions. The first is assigning a function to the click event of the selected element(s) (all elements with class 'crop-img'), the second is firing the click event of the selected element (the element with id='imageX' with 'X' being the current value of counter).

Also instead of a function name, you can just inline the function instead:

$("#bigImage").click(function(){
   paused=!paused;
})

This assigns the unnamed inline function for the click event of the element with id='bigImage', which is where you want to pull up the image. Put your code in there that will bring up the image, it will run when the big image is clicked.

Such as if you want to actually go to the image, as in your html example, put this line in there:

window.location.href = "someHrefHere";

If you want to know the the src of the current bigImage, you can grab it with jquery:

var myhref = $("#bigImage").attr("src");

You can put it together from there.

Happy Coding!