Trying to create a meme generator that spits out an image and puts some input text over it.
I have gotten this to the point where it creates the image and a text html with everything the way I want it, but the text is not showing up over the image when I submit the form. I can tell that the html for the text is accepting and updating correctly with the input text, but text just not showing.
I tried setting the div wrapper to a position:relative and the text to position:absolute with a top setting, but no dice. Doing this just with vanilla JS..
Any help would be hugely appreciated!
here is the Code that I have:
'use strict';
let count=0;
// SUBMIT FORM
document.getElementById('memeInput').addEventListener('submit',function(e){
count++;
//prevent default
e.preventDefault();
//set image, top, and bottom to variables we can work with
let bottomText = document.getElementById('bottomText').value;
createMeme();
appendTop();
})
function createMeme(){
let image = document.getElementById('imageLink').value;
//create the 'meme'
let meme = document.createElement("IMG");
//add that meme to the memeSection
document.getElementById('memeSection').appendChild(meme);
//set the id = meme plus count so that multiple can be created at once, and then set the image equal to the image input link based on the form
meme.setAttribute("id", "meme"+count);
document.getElementById("meme"+count).src=image;
}
function appendTop(){
// put the top text in the image
let topText = document.getElementById('topText').value;
let top = document.createElement("H1");
document.getElementById('meme' + count).appendChild(top);
top.setAttribute("id","text"+ count);
document.getElementById("text" + count).innerHTML = topText;
}
#memeSection{
position:relative;
}
#memeSection > img{
height:60vh;
margin:5vh;
}
#memeSection > h1{
position:absolute;
top:5px;
color:white;
top: 10px;
left:5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Meme</title>
</head>
<container>
<body>
<div class="text-center">
<h1>Meme Generator</h1>
</div>
<div class="text-center">
<form action="#" id="memeInput">
<div>
<label for="image">Image Link</label>
<input type="url" id="imageLink">
</div>
<div>
<label for="topText">Text at Top</label>
<input type="topText" id="topText">
</div>
<div>
<label for="bottomText">Text at Bottom</label>
<input type="bottomText" id="bottomText">
</div>
<input type="submit" value="Make Meme">
</form>
</div>
<div id="memeSection" class="col-12 col-lg-6">
</div>
</body>
<script src="script.js"></script>
</container>
</html>
After Inspecting your Code, I ended up with that the Text at Top is appended as you wanted but it is not shown because of your Styling and if you want to add a text onto a image this is not the way it is done,
Read This Question At StackOverflow it has detailed information on how you can add text to a image
Or
Checkout this tutorial On YouTube which Will for sure help you to achieve your Goal
Related
This one is very tricky and I cant imagine how to solve it... Request was "Double click on picture, then you get picture name in to text field. There you can change name and save it with button. Also there's another button which clicked you delete the picture."
At this moment I dont have much, it's just a guess what it should look like..
function rodytiViduryje(pav){
var paveikslas=document.getElementById("jap");
paveikslas.src=pav.src;
var aprasymas=document.getElementById("apr");
aprasymas.value=pav.title;
lastph=pav;
}
function keistiAprasyma(){
var NA=document.getElementById("apr");
lastph.title=NA.value;
}
function trintiPaveiskla(){
lastph.remove();
}
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt=japonija class="b" style="width:780px;height:480px">
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti" onclick="keistiAprasyma()">Išsaugoti aprašymą</button><br/>
<br>
<button onclick="trintiPaveiksla()">Trinti iš galerijos</button><br/>
</div>
</div>
Please share your ideas! :)
JS could be something like this (also made small changes to HTML):
document.addEventListener("DOMContentLoaded", function(event) {
let img = document.querySelector('#jap');
let descriptionInput = document.querySelector('#apr');
let saveButton = document.querySelector('#saugoti');
let deleteButton = document.querySelector('#trinti');
img.addEventListener('dblclick', function (e){
console.log
descriptionInput.value = this.alt;
});
saveButton.addEventListener('click', function(){
img.alt = descriptionInput.value;
});
deleteButton.addEventListener('click', function(){
img.remove();
});
});
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt="japonija" class="b" style="width:780px;height:480px" />
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti">Išsaugoti aprašymą</button><br/>
<br>
<button id="trinti">Trinti iš galerijos</button><br/>
</div>
</div>
My advice for future endeavours: scale your tasks to smaller ones. This will give you more valid results. Also you'll be able to learn while combining those multiple solutions to the one you need. I.e., your searches for this task could be:
Javascript double click event
Javascript get images' alt value
Javascript set images' alt value
Javascript remove DOM element
Apparently, I can’t figure out how to bind font awesome element to the cloned form. I tried everything, but the image on the cloned form goes to the original message.
The image preview was already functioning on the cloned form. Afterwards First on html, I added font awesome element with camera icon just above <input type="file". Second on javascript, I added a function to trigger font awesome element, which works on the original message submission. Third, I created iClone() function to find, trigger, and change the data-count number of both font awesome and input file after grabbing font awesome element using jQuery. Fourth, I created var cloneCount = 0; variable initially set to 0 to increment and change the id name of the cloned form. Fifth, I created var bindFileChange = function(cloneCount) { variable to bind font awesome and file input elements to the new form with new form id name.
Next on the reply button $("button").click(function(){, where the actual cloning takes place, first, cloneCount++; increments cloneCount, i.e., id name of the new form. Second, it clones the form and add the new id name to it. Third, it runs the iClone function. Finally, it runs the bindFileChange(cloneCount); function. This is supposed to bind both font awesome and input file to the new form with a new id. But it doesn't work.
Here is the link to the test case, where I tried to add font-awesome to cloned image preview, on JSBin: https://jsbin.com/cepanet/4/edit?js
And, here is the link to the functioning code for cloning image preview without font-awesome on JSBin: https://jsbin.com/xexejur/10/edit?html,js,output
$(document).ready(function() {
// Original message. It is not cloned.
$("#form_clone0").click('submit', function() {
let fileInput = $('input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
// Function to activate font awesome
$("i").click(function() {
$("input[type='file']").trigger('click');
});
});
// Function to find, trigger, and change the data-count number of both font
// awesome and input file after grabbing font awesome element using jQuery.
function iClone() {
$("i").click(function() {
$("input[type='file']").first().attr('data-count', cloneCount).trigger('click');
});
};
// Variables to bind font awesome and file input elements to cloned form.
// Including, variable to increment cloned form counter. Set to zero.
var cloneCount = 0;
var bindFileChange = function(cloneCount) {
let fileInput = $('i, span, input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$('i').siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
};
$("button").click(function() {
// Cloned functions for reply message. Actual cloning takes place
// here.
cloneCount++;
$("#form_clone0").clone().attr('id', 'form_clone' + cloneCount).insertAfter("#form_clone" + (cloneCount - 1));
iClone();
bindFileChange(cloneCount);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="form_clone0">
<form method="post" enctype="multipart/form-data">
<div>
<img class="image_Preview" width="100" height="100" />
<i class="fa fa-camera"></i>
<input type="file" class="fileUpload" data-count="0" style="display: none;">
</div>
<div>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
<button>Reply</button>
</body>
</html>
Use a label and assign it [for] attribute with the value of the input id:
<label for='upload'></label>
<input id='upload' type='file'>
When the label is clicked then the input that it is associated with is as well.
Delegate events on an ancestor tag that existed since the page loaded. Pass a selector that represents all applicable tags that you want to target to the second parameter (it's called Event.data).
$('main').on('click change', '.file, .upload, .reply', function(e) {...
Cloning becomes complicated if the source being cloned has unwanted content. It may be easier just to clone the contents of a <template> or just render a htmlString. The following demo does the latter.
99% of the time it's optimal to place all <script> tags before the </body> end tag (see HTML of Demo).
let count = 0;
$('main').on('click change', '.file, .reply, .upload', function(e) {
if ($(this).is('.reply')) {
++count;
const htmlString = `<form id="box${count}" class="input-group form-row" method="post" enctype="multipart/form-data"><label class="input-group-prepend" for="image${count}" style="display:block;min-height:120px"><figure class="input-group-text" style="min-height:100%"><i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i> <img class="preview" width="100" height="100"> <figcaption> </figcaption></figure></label><input id="image${count}" name='image${count}' class="file" type="file" data-count="${count}" style="display: none"><section class="input-group-append" style="max-height: 120px"><fieldset class="btn-group-vertical" style="min-height: 100%"><button class="upload btn btn-primary btn-sm" type="button" style="min-height: 50%" form="box${count}">Upload</button> <button class="reply btn btn-secondary btn-sm" type="button" style="min-height: 50%">Reply</button></fieldset></section></form>`;
$('main')[0].insertAdjacentHTML('beforeend', htmlString);
} else if ($(this).is('.file')) {
$(this).closest('.input-group').find('.preview').attr('src', window.URL.createObjectURL(this.files[0]));
$(this).closest('.input-group').find('figcaption').text(this.value.split(`\\`).pop());
} else if ($(this).is('.upload')) {
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
$('body').tooltip({
selector: '.tip'
});
i.tip.btn:hover {
color: #fff;
background: #000;
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<main class='container'>
<form id='box' class='input-group form-row' method='post' enctype="multipart/form-data">
<label class='input-group-prepend' for='image' style='display:block;min-height:120px'>
<figure class='input-group-text' style='min-height:100%'>
<i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i>
<img class="preview" width="100" height="100">
<figcaption> </figcaption>
</figure>
</label>
<input id='image' name='image' class="file" type="file" data-count="0" style="display: none;">
<section class=' input-group-append' style='max-height: 120px'>
<fieldset class='btn-group-vertical' style='min-height: 100%'>
<button class='upload btn btn-primary btn-sm' type='button' style='min-height: 50%' form='box'>Upload</button>
<button class='reply btn btn-secondary btn-sm' type='button' style='min-height: 50%'>Reply</button>
</fieldset>
</section>
</form>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
<!--This is where the jQuery/JavaScript would be placed-->
</script>
</body>
</html>
I've got 3 images in the screen. Each image should display a different form in the SAME POSITION in the screen and hide the other 2 forms.
Image1: When clicked show form1 and hide form2 and form 3
Image2: When clicked show form2 and hide form1 and form 3
Image3: When clicked show form3 and hide form1 and form 2
Forms should be shown at the same position. I just see a solution calling the whole page by sending a parameter in the URL stating which form to show on the screen. I would really like to show the right form depending on what image is clicked at the moment without that.
I'm using HTML5, Bootstrap 4 and JavaScript - any suggestion using any of these languages would be perfect.
There are a lot of answers to things like this, try looking around before asking a question.
Here is one of the simplest approaches you will ever see using only JS and HTML
JavaScript
const imageOne = document.getElementById('imageOne');
const imageTwo = document.getElementById('imageTwo');
const imageThree = document.getElementById('imageThree');
const formOne = document.getElementById('formOne');
const formTwo = document.getElementById('formTwo');
const formThree = document.getElementById('formThree');
imageOne.addEventListener("click", function() {
formOne.style.display = "block";
formTwo.style.display = "none";
formThree.style.display = "none";
});
imageTwo.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "block";
formThree.style.display = "none";
});
imageThree.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "none";
formThree.style.display = "block;
});
HTML
<img id="imageOne" src="http://foo.bar">
<img id="imageTwo" src="http://bar.foo">
<img id="imageThree" src="http://last.image">
<div id="formOne" style="display: none">
<form>
....
</form>
</div>
<div id="formTwo" style="display: none">
<form>
....
</form>
</div>
<div id="formThree" style="display: none">
<form>
....
</form>
</div>
Ok, you need:
the 3 images
the 3 forms, with position absolute or fixed (so that they stay in the same position)
a JS function attached to the click event of every image that changes the correspondet form style to display:block and the others to display:none.
Something like:
var form1 = document.getElementById('form1')
document.getElementById('form1').onclick = function() {
form1.style.display = 'block'
form2.style.display = 'none'
form3.style.display = 'none'
}
For each one of your forms.
Here is a working pen I made to show how to do it.
https://codepen.io/jaimelopez18/pen/zWOEMw
This is all made with pure js (vanilla). You should try to learn this first and after you get a good grasp of it, I recommend taking a look at VueJS.
I just made a simple skeleton in jsFiddle as per your requirements, have a look at the code.
HTML:
<html>
<head>
<script type='text/javascript' src="jquery.min.js"></script>
</head>
<body>
<div class="jsImgWrp">
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form1" />
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form2"/>
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form3" />
</div>
<div class="jsFormWrp form-wrapper">
<div class="jsFrm form1 active">
form 1
</div>
<div class="jsFrm form2">
form 2
</div>
<div class="jsFrm form3">
form 3
</div>
</div>
</body>
</html>
CSS:
.form-wrapper .jsFrm {
display:none;
padding:10px;
border:solid 2px #eee;
width:200px;
height:100px;
}
.form-wrapper .jsFrm.active {
display:block;
}
.jsImgWrp img {
width:100px;
display:inline-block;
}
Javascript:
$(document).ready(function(){
var imgWrapper = $('.jsImgWrp');
var formWrapper = $('.jsFormWrp');
$('.jsImg', imgWrapper).on('click', function(){
var formId = $(this).data('formid');
$('.jsFrm').removeClass('active');
$('.' + formId).addClass('active');
})
});
Hope this may help you.
I have written code that creates a checkbox list where when i click the checkbox below my list of options i would like a link to show underneath that the user can click (show/hide) I cannot figure out why my code will not work. If the user unchecked the box the link disappears but nothing happens when i click my check boxes. I would like to do this fix in JQuery
<!DOCTYPE html>
<html>
<div class ="container">
<head></head>
<body>
<input id="grp1" type="checkbox" value="group_1" onClick="http://google.com" />
<label for="grp1"> group 1 </label>
<div>
<input id="grp2" type="checkbox" value="group_2" onClick="http://google.com" >
group_2</label>
</div>
</body>
</html>
You'll have to use javascript to hide/show the wanted elements in html. There are many approaches to this. The most basic one would be something like
<!DOCTYPE html>
<html>
<body>
<div id="container">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("container").onclick = function (e) {
//check every box if it's checked
if (document.getElementById('grp1').checked) {
document.getElementById('url1').style.display = 'block';
} else {
document.getElementById('url1').style.display = 'none';
}
if (document.getElementById('grp2').checked) {
document.getElementById('url2').style.display = 'block';
} else {
document.getElementById('url2').style.display = 'none';
}
}
</script>
</body>
</html>
Of course you can use different approaches like creating the element in javascript then adding it to the html if you don't like the idea if existing hidden elements. You might also use loops to loop through checkbox element and simply show/hide the url accordingly. And more to make the code flexible on any number of boxes. Something like this
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div id="checkBoxContainer">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
</div>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("checkBoxContainer").onclick = function (e) {
var linkNumber = 1; //This is number of the first url element with ud url1
var containerChildren = document.getElementById("checkBoxContainer").children;
//loop through the children elements
for (var i = 0; i < containerChildren.length; i++) {
var oneChild = containerChildren[i]; //catch only one child in a variable
//simply filter the input elements which are of type checkbox
if(oneChild.tagName === "INPUT" && oneChild.type === "checkbox"){
//Show or hide the url accordingly.
if (oneChild.checked) {
document.getElementById('url' + linkNumber++).style.display = 'block';
} else {
document.getElementById('url' + linkNumber++).style.display = 'none';
}
}
}
}
</script>
</body>
</html>
The onclick HTML attribute doesn't work that way. The attribute value is executed as javascript. You can make a js function to show/hide the link.
Hi you want to try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.group-link{
display: block;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="jsParent">
<label for="grp1">
<input id="grp1" type="checkbox" value="group_1" onchange="showLink(this)"/> group 1
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/dogs-101/videos/the-doberman">Group 1 Link</a>
</div>
<div class="jsParent">
<label for="grp2">
<input id="grp2" type="checkbox" value="group_2" onchange="showLink(this)"/> group_2
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/cats-101/videos/ragdoll">Group 2Link </a>
</div>
<script type="text/javascript">
function showLink(el){
var parent = el.parentElement.parentElement;
var linkEl = getAnchorEl(parent);
if(linkEl){
if(el.checked){
linkEl.classList = linkEl.classList.value.replace('hidden', '');
}else{
linkEl.classList = linkEl.classList.value + ' hidden';
}
}
}
function getAnchorEl(parent){
var childrens = parent.children;
var linkEl = null;
for (var i = 0; i < childrens.length; i++) {
var childEl = childrens[i];
if(childEl.classList.value.indexOf('jsLink') > -1){
linkEl = childEl;
break;
}
}
return linkEl;
}
</script>
</body>
</html>
Your question is undoubtedly a duplicate but I am answering because I would like to help you identify issues with the code you posted.
I notice you have a <div>tag between your tag and tag. Why? This is a bit of an over simplification but as a general rule never put anything between your <html> and <head> tag and only place <div> tags inside your <body> tag. Also be mindful of how you nest your elements. That tag starts after and before .
Even if that were correct placement you close the before you close your div arbitrarily in the middle of your body tag. you should never have
<div>
<p>
</div>
</p>
Instead it should look like this
<div>
<p>
</p>
</div>
In your onClick attribute you have a random URL. That will not open a new window. You new too put some javascript in there.
<input onClick="window.open('http://google.com')">
Also your second label tag does not have an opening, just a </label> close tag
To answer your question - I suggest you look at the jQuery toggle function.
<input type="checkbox" id="displayLink" />
Google
<script type="text/javascript">
$("#displayLink").click(function(){
$("#googleLink").toggle();
});
</script>
As a general rule you should favor event handlers (such as the $("").click() posted above) to handle events (like clicking) as opposed to html attributes such as onClick.
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:
Current picture
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.
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"><</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">></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>
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!
You can retrieve the src of the current image when you click on the big image like this:
$( ".row div:nth-child("+counter+") img" ).attr('src')
counter was setted as index of your current image and this should be inside of your $("#bigImage") click function.