This is my code. I'm trying to hide another image behind another and make a button press switch which image is visible along with changing the href link.
function revealHQ() {
var pilaf = document.getElementById('PilafHQ');
var altaf = document.getElementById('altafsung');
// get the current value of the hidden image's display property
var displaySetting = altaf.style.display;
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// hidden message is visible. hide it
altaf.style.display = 'none';
pilaf.style.display = 'block';
} else {
// if message is hidden. show it
altaf.style.display = 'block';
pilaf.style.display = 'none';
}
}
.altafsung {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
display: block;
}
.PilafHQ {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
display: none;
}
<a href="https://tse1.mm.bing.net/th/id/OIP.9uW8U7EhqDOzl1-gONQjwAHaGj?pid=ImgDet&rs=1" target="_blank">
<div class="PilafHQ"><img src="Images/Pilaf Castle Entrance cropped.png " alt="Pilaf castle entrance" width="250" height="250"></div>
</a>
<a href="https://altafs-bazaar.bertry.repl.co/" target="_blank">
<div class="altafsung"><img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250"></div>
</a>
<img src="Images/walkingbear.gif" alt="polar bear walking 😲" onclick="revealHQ();">
Use ID on the elements when you want to access byId
It is simpler to toggle the class
I gave the emoji an ID too
window.addEventListener("load", function() { // when page loads
document.getElementById("toggleImage").addEventListener("click", function() {
var pilaf = document.getElementById('PilafHQ');
var altaf = document.getElementById('altafsung');
// show one, hide the other
altaf.classList.toggle("hide")
pilaf.classList.toggle("hide")
});
});
.altafsung {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
}
.PilafHQ {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
position: absolute;
right: 0%;
}
.hide {
display: none
}
<a href="https://tse1.mm.bing.net/th/id/OIP.9uW8U7EhqDOzl1-gONQjwAHaGj?pid=ImgDet&rs=1" target="_blank">
<div id="PilafHQ" class="hide"><img src="Images/Pilaf Castle Entrance cropped.png " alt="Pilaf castle entrance" width="250" height="250"></div>
</a>
<a href="https://altafs-bazaar.bertry.repl.co/" target="_blank">
<div id="altafsung"><img src="Images/Altaf Bazaar Advert.png" alt="Altaf Sunglasses" width="250" height="250"></div>
</a>
<img id="toggleImage" src="Images/walkingbear.gif" alt="polar bear walking 😲">
Related
I am trying to add arrows to my simple lightbox. The arrows are simple symbols "<" and ">. I have created them with jquery and when I try to add them to the image, they show up in the developer tools but not in the website for whatever reason. Can you tell me what's the problem please?
Here is the screenshot of the issue, if you did not understand my poor english. As you can see, the arrows are created in developer tools, but they cannot be found on the website. https://prnt.sc/26lyfbc
//Gallery Lightbox made with Jquery
let gallery = $('#gallery'),
overlay = $('<div = id = "overlay"></div>').appendTo('body').hide();
//Opens the lightbox with chosen image
gallery.find('a').on("click", function(event){
event.preventDefault();
let href = $(this).attr('href'),
image = $('<img>', {src: href}),
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
image.appendTo(overlay);
larrow.appendTo(image);
overlay.show();
//Closes the Lightbox with the image, by clicking on the overlay
$(document).on("click", "#overlay", function(){
overlay.hide();
image.remove();
})
})
.gallery {
display: none;
opacity: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 1004px;
margin: 0 auto;
}
.gallery img {
position: relative;
top: 100px;
height: 200px;
width: 300px;
margin: 0 1em;
}
#overlay {
background: rgba(0, 0, 0, .7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#overlay img {
margin-top: 5%;
border: solid 5px white;
border-radius: 5px;
}
//Dont mind these, the silly values are just for testing purposes
#larrow {
font-size: 500px;
color: red;
z-index: 2000;
}
#rarrow {
font-size: 500px;
color: red;
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img src="img\placeholder1.jpg" alt="">
<img src="img\placeholder2.jpg" alt="">
<img src="img\placeholder3.jpg" alt="">
<img src="img\placeholder4.jpg" alt="">
<img src="img\placeholder5.jpg" alt="">
<img src="img\placeholder6.jpg" alt="">
</div>
</body>
You have a few errors in your code. Instead of
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
You should write it like this. There is no need for the '=' between div and id.
larrow = $('<div id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div id = "rarrow"> > </div>'); //RIGHT ARROW
The same goes for the following tags:
overlay = $('<div id = "overlay"></div>').appendTo('body').hide();
Putting the div tags in the image will also not work. Instead you should put the image and the arrows in a container together like this:
<div id="overlay">
<img src ... </img>
<div id = "larrow"> < </div>
<div id = "rarrow"> > </div>
</div>
Refer to Floating Div Over An Image to see the needed css.
I have an app that shows the active menu with javascript, it is an app made with Cordova.
The problem is that when I press the button to go back, it does not show me the active menu, the previous one is still here.
Is there a possibility to solve this? What I do is with javascript hide the non-active image and show the active image when pressed.
I have attached the code here:
<body>
<script>
var webAppWindow;
</script>
<iframe id="elframe" src="https://uoapp.es/cuenta/" name="iframe" style="position:fixed; width: 100%; height: 94%; "
onLoad="cambioiframe();"></iframe>
<div class="navbar">
<img src="img/logo-uo.png"
style="position: fixed;left: 50%; bottom: 0px; transform: translateX(-50%); width: 120px;" alt="logo"></a>
<a href="https://uoapp.es/blog" target="iframe"><img src="img/icons8-news-64-active.png"
style="position: fixed; left: 0%; bottom: 0px; width: 50px; display: none;" id="blog-activo"
alt="blog"></a>
<a href="https://uoapp.es/blog" target="iframe" onclick="mostraricono1();"><img src="img/icons8-news-64.png"
style="position: fixed;left: 0%; bottom: 0px; width: 50px;" id="blog-no-activo" alt="blog"></a>
<div class="contacto">
<a href="https://uoapp.es/contacto" target="iframe"><img src="img/icons8-group-message-64-active.png"
style="position: fixed;left: 15%; bottom: 0px; width: 50px; display: none;" id="contacto-activo"
alt="contacto"></a>
<a href="https://uoapp.es/contacto" target="iframe" onclick="mostraricono2();"><img
src="img/icons8-group-message-64.png" style="position: fixed;left: 15%; bottom: 0px; width: 50px;"
id="contacto-no-activo" alt="contacto"></a>
<a href="https://uoapp.es/directorio/" target="iframe"><img src="img/icons8-page-64-active.png"
id="directorio-activo" alt="directorio"
style="position: fixed;left: 72%; bottom: 0px; width: 50px; display: none;"></a>
<a href="https://uoapp.es/directorio/" target="iframe" onclick="mostraricono3();"><img
src="img/icons8-page-64.png" id="directorio-no-activo" alt="directorio"
style="position: fixed;left: 72%; bottom: 0px; width: 50px;"></a>
<a href="https://uoapp.es/cuenta/" target="iframe"><img src="img/icons8-user-male-64-active.png"
id="cuenta-activo" alt="cuenta"
style="position: fixed;left: 86%; bottom: 0px; width: 50px; display: none;"></a>
<a href="https://uoapp.es/cuenta/" target="iframe" onclick="mostraricono4();"><img
src="img/icons8-user-male-64.png" id="cuenta-no-activo" alt="cuenta"
style="position: fixed;left: 86%; bottom: 0px; width: 50px;"></a>
</div>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script>
</script>
<p id="OneSignalUserId"></p>
<p style="word-break: break-all;" id="OneSignalPushToken"></p>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
Javascript code is:
function mostraricono1() {
const blog_noactivo = document.getElementById('blog-no-activo');
blog_noactivo.style.display = "none";
const blog_activo = document.getElementById('blog-activo')
blog_activo.style.display = "block";
const contacto_noactivo = document.getElementById('contacto-no-activo');
contacto_noactivo.style.display = "block";
const contacto_activo = document.getElementById('contacto-activo')
contacto_activo.style.display = "none";
const directorio_noactivo = document.getElementById('directorio-no-activo');
directorio_noactivo.style.display = "block";
const directorio_activo = document.getElementById('directorio-activo')
directorio_activo.style.display = "none";
const cuenta_noactivo = document.getElementById('cuenta-no-activo');
cuenta_noactivo.style.display = "block";
const cuenta_activo = document.getElementById('cuenta-activo')
cuenta_activo.style.display = "none";
}
That is the function show icons 1 then there are the other 3 functions that are identical for each image
I hope someone can help me. If someone can, thank you!
one of the solutions is to give them serial id or serial class name , put for the first one
id = 'id1' and the second element give it an id = 'id2' and so on
then we gonna handle it in the java script using a counter like
var i = 1 ;
so if you want an element of id1 ,it gonna be ('id'+i) and after clicking the next button ,the counter increase (i++) and when clicking the previous button the counter decrease (i--)
below is an example of what i mean
// get all the elemnts of the main div
var selectedDiv = document.querySelectorAll('.contacto div')
// the counter
var i = 1;
function btnRing(clicked_id) {
// this for hide all the elements inside the main div
//when clicking any button the all elements is gonna hide
selectedDiv.forEach(div => {
div.style.display = "none"
})
// this for next button
if (clicked_id === 'btn1') {
// this line to make the previous button active when clicking the next button
document.getElementById('btn2').style.pointerEvents = 'all'
//this to show the next element
document.getElementById('div' + (i + 1)).style.display = 'block'
// increase the counter when clicking next
i++
// this for deactivating the next button when is there is no more elements
if (i >= 4) {
document.getElementById(clicked_id).style.pointerEvents = 'none'
}
//this is the previous button
} else if (clicked_id === 'btn2') {
// this for activating the next button after i deactivate it above
document.getElementById('btn1').style.pointerEvents = 'all'
//decrease the counter
i--
// showing the previous elemnt
document.getElementById('div' + i).style.display = 'block'
//this for deactivating the previous button after is no more elements
if (i <= 1) {
document.getElementById(clicked_id).style.pointerEvents = 'none'
}
}
}
#div1,
#div2,
#div3,
#div4 {
height: 10rem;
width: 10rem;
background-color: brown;
color: aliceblue;
display: none;
}
#div1 {
display: block;
}
<div class="contacto">
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
<div id="div4">DIV 4</div>
</div>
<button id='btn1' onclick="btnRing(this.id)">next</button>
<button id='btn2' onclick="btnRing(this.id)">previous</button>
So I have a page where the mother or father can add family members, they all need to fill out the same form, so I thought I would just use 1 form.
However that has created a small problem, as I want the person setting up the profiles to be able to double check any of the forms data, by clicking on the family members face.
see example of what I have so far.
https://codepen.io/russellharrower/pen/rzxLRj
js
var newpetsid = 0;
$(document).on ("click", "div.btn-floating", function () {
alert(this.id);
if(this.id === "addnew"){
dl= document.getElementById("newpetprofiles");
dl.insertAdjacentHTML('afterbegin','<div id="'+ newpetsid +'" class="btn-floating btn-large blue waves-effect waves-light"><img src="data:image/png;base64,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"/></div>');
newpetsid++;
}
var morphFAB = $('#overlay');
morphFAB.toggleClass('visible hidden');
if (morphFAB.hasClass('visible')) {
$('#form').addClass('animated slideInUp');
}else {
$('#form').removeClass('animated slideInUp');
}
})
html
<!-- on Morph FAB Display -->
<div id="newpetprofiles" class="fixed-action-btn">
<!-- beforebegin -->
<div id="overlay" class="blue-grey hidden">
<div id="form">
DEPENDING ON IF IT IS THE ADD BUTTON OR A IMAGE OF THEIR KID A DIFFENT FORM SHOULD SHOW.
</div>
</div>
<!-- afterbegin -->
<div class="btn-floating btn-large blue waves-effect waves-light">
<img src="https://ipet.xyz/template/images/russellharrower.jpg"/>
</div>
<!-- beforeend -->
<div id="addnew" name"addnew" class="btn-floating btn-large blue waves-effect waves-light">
<i class="material-icons">
add
</i>
</div>
<!-- afterend -->
</div>
css
body {
overflow: hidden;
}
img {
max-width: 100%;
max-height: 100%;
}
.fixed-action-btn {
top:3%;
right: calc(50%);
left: calc(50% - auto);
margin:0 auto !important;
padding: 0;
#overlay {
position: absolute;
// text-align:center;
transform-origin: center center;
transition: 0.5s ease;
&.hidden {
height: 55px;
width: 55px;
border-radius: 0%;
transform: scale(0);
}
&.visible {
position: fixed;
top: 0;
right:0;
left:0;
// bottom: 0;
height: 100%;
color:#FFF;
text-align:left;
width: 100%;
border-radius: 0;
//transform: scale(25);
}
h2 {
position: fixed;
transform: scale(1) !important;
top: 100px;
}
}
}
#form {
position: absolute;
top: 100px;
left: 0;
right: 0;
//display: none;
// transform: translateY(200px);
// display: none;
z-index: 1000;
// transition: 0.5s ease;
.btn-floating.red {
display: block;
}
}
I know that all the data will need to be saved to an array, one that can grow as the person who is setting the profiles up.
and then once all profiles are completed then send it to the server with a xmlhttp
Create an array for family members (fm in the future);
var members = [];
Then on each add event create a object with empty values for the form and push it to members (you can use the length of the array before pushing the fm for the div's id)
dl.insertAdjacentHTML('afterbegin','<div id="'+ members.length +'" ...<more code>'
var newMember = {aProperty: '', anotherProperty: ''};
members.push(newMember);
Open the form right before adding a fm using as Id the length of members, else set the id to the id of the family member clicked
if(this.id === "addnew"){
var memberId = members.length;
<... rest of the add new logic ...>
} else {
var memberId = this.id;
}
Fill the inputs values using the fm id to search on the array
member = members[memberId];
$('input.a-property').val(member.aProperty);
When saving the form be sure to save the values to the array
members[memberId].aProperty = $('input.a-property').val();
I am trying to achieve an effect of looping through images if a div is hovered or not.
If mouseenter div then cycle through images
if mouseleave div then stop cycling through images and remove all images (only background image will be visible).
currently I am using a setTimeout to fire itself recursively but I am having trouble with jquery on detecting if the mouse is hovering or left the object.
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
});
Here is a codepen for reference: http://codepen.io/H0BB5/pen/xEpqbv
A similar effect I am trying to achieve can be seen when hovering the cargo logo on this website: http://cargocollective.com/
You just need to clear the timer on mouseleave.
var timer = null;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
timer = setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
}).mouseleave(function(){
clearTimeout(timer);
});
Here's a codepen: http://codepen.io/anon/pen/rrpwYJ
I would use an interval, and the JQuery .hover() functionality. Simply replacing your $(".one-box").mouseenter() with this will run the loop while you're hovered and remove it once your mouse leaves the area.
The important bit:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
Full example:
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
// New code:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
.one-box {
position: relative;
height: 300px;
width: 300px;
}
.one-box a {
width: 100%;
}
.one-box a img {
max-width: 100%;
}
/* .social_img { display: none; } */
a#social_logo {
background-image: url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
background-repeat: no-repeat;
background-position: 0 0;
display: block;
position: absolute;
width: 73px;
height: 73px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.one_box .social_gallery {
position: absolute;
left: 0;
top: 0;
opacity: 1;
display: none;
}
.nav_logo .social_gallery .social_img {
position: absolute;
float: none;
margin: 0;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-box nav_logo">
<a id="social_logo" href="#" alt=""></a>
<div class="social_gallery img_wall gallery">
<div class="social_img wall_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=222&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=777&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
</div>
<div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm having trouble knowing how to build the functionality to be able to click to scroll through my photos in the lightbox. I'm thinking a solution could be to iterate through each one and go to the next index with each click, but I'm not sure how to do it. I'm new to programming and am trying to build from scratch without a plugin. My code is below, and I've included a link so you can see the project so far.
https://abharms.github.io/Interactive_Photo_Gallery/
HTML
<body>
<div class="form-container">
<form>
<input type="text" name="search" value="Search">
</form>
</div>
<div class="photos-container">
<div class="row">
<div class="col-3 images">
<img src="photos/thumbnails/01.jpg" alt="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
<img src="photos/thumbnails/02.jpg" alt="The lake was so calm today. We had a great view of the snow on the mountains from here.">
<img src="photos/thumbnails/03.jpg" alt="I hiked to the top of the mountain and got this picture of the canyon and trees below.">
</div>
<div class="col-3 images">
<img src="photos/thumbnails/04.jpg" alt="It was amazing to see an iceberg up close, it was so cold but didn’t snow today.">
<img src="photos/thumbnails/05.jpg" alt="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons.">
<img src="photos/thumbnails/06.jpg" alt="Fall is coming, I love when the leaves on the trees start to change color.">
</div>
<div class="col-3 images">
<img src="photos/thumbnails/07.jpg" alt="I drove past this plantation yesterday, everything is so green!">
<img src="photos/thumbnails/08.jpg" alt="My summer vacation to the Oregon Coast. I love the sandy dunes!">
<img src="photos/thumbnails/09.jpg" alt="We enjoyed a quiet stroll down this countryside lane. ">
</div>
<div class="col-3 images">
<img src="photos/thumbnails/10.jpg" alt="Sunset at the coast! The sky turned a lovely shade of orange.">
<img src="photos/thumbnails/11.jpg" alt="I did a tour of a cave today and the view of the landscape below was breathtaking.">
<img src="photos/thumbnails/12.jpg" alt="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in.">
</div>
</div>
</div>
<script type="text/javascript" src="js/gallery.js"></script>
</body>
CSS
form {
text-align: center;
margin-top: 30px;
}
input[type=text] {
height: 32px;
width: 58%;
border: 2px solid lightgray;
border-radius: 4px;
}
input[type=text]:focus {
outline: none;
}
img {
display: block;
margin: 0 auto 30px auto;
}
.col-3 {
text-align: center;
}
.col-3:first-child {
margin-top: 30px;
}
#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#overlay img {
width: 50%;
margin-top: 10%;
}
.imageContainer {
max-height: 100%
width: 600px;
margin: 0 auto;
position: relative;
}
#caption {
color: white;
margin: 0 auto;
text-align: center;
max-width: 600px;
}
a.leftArrow,
a.rightArrow {
padding: 15px;
}
.leftArrow,
.rightArrow {
color: white;
font-size: 56px;
position: absolute;
top: 22%;
}
.leftArrow {
left: 12%;
}
.rightArrow {
right: 12%;
}
#media only screen and (min-width: 820px ) {
.row {
margin-top: 40px;
}
.photos-container {
width: 100%;
margin: 0 auto;
}
.col-3 {
width: 25%;
float: left;
}
.col-3:first-child {
margin-top: 0;
}
input[type=text] {
width: 460px;
}
.leftArrow,
.rightArrow {
top: 35%;
}
.leftArrow {
left: 18%;
}
.rightArrow {
right: 18%;
}
#media only screen and (min-width: 960px) {
.photos-container {
width: 980px;
}
.leftArrow,
.rightArrow {
top: 40%;
}
.leftArrow {
left: 20%;
}
.rightArrow {
right: 20%;
}
}
jQuery
var $overlay = $('<div id="overlay"></div>');
var $imageContainer = $('<div class="imageContainer"></div>')
var $caption = $('<p id="caption"></p>');
var $image = $("<img>");
var $leftArrow = $('<a href="#" class="leftArrow" onclick="prev(); return false;"><i class="fa fa-angle-left" aria-hidden="true"></i>');
var $rightArrow = $('<a href="#" class="rightArrow" onclick="next(); return false;"><i class="fa fa-angle-right" aria-hidden="true"></i>');
//Add image container to overlay
$overlay.append($imageContainer);
//Add image to overlay
$imageContainer.append($image);
//Add navigation arrows to overlay
$imageContainer.append($leftArrow);
$imageContainer.append($rightArrow);
//Add caption to image
$overlay.append($caption);
//add overlay
$("body").append($overlay);
//capture click event on a link to an image
$(".images a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
$overlay.show();
//get child's alt attribute and set caption
var $captionText = $(this).children("img").attr("alt");
$caption.text($captionText);
});
$overlay.click(function(){
$overlay.hide();
})
$(".leftArrow").bind("click", function(e){
e.stopPropagation();
});
$(".rightArrow").bind("click", function(e){
e.stopPropagation();
});
function next() {
$($image).each(function(){
$(this).hide();
$($caption).hide();
$($image).next();
})
}
I updated your script with a working version. Let me know if it does what you want.
I refactored your code a bit by removing next() and prev() onclick handlers. I also move all the code to render image with alt text in a helper function. The cycling logic is exactly like what you expected.
Cheers
var $overlay = $('<div id="overlay"></div>');
var $imageContainer = $('<div class="imageContainer"></div>')
var $caption = $('<p id="caption"></p>');
var $image = $("<img>");
var $leftArrow = $('<a href="#" class="leftArrow"><i class="fa fa-angle-left" aria-hidden="true"></i>');
var $rightArrow = $('<a href="#" class="rightArrow"><i class="fa fa-angle-right" aria-hidden="true"></i>');
var $links = $(".images a");
var current_index;
//Add image container to overlay
$overlay.append($imageContainer);
//Add image to overlay
$imageContainer.append($image);
//Add navigation arrows to overlay
$imageContainer.append($leftArrow);
$imageContainer.append($rightArrow);
//Add caption to image
$overlay.append($caption);
//add overlay
$("body").append($overlay);
//capture click event on a link to an image
$(".images a").click(function(event){
event.preventDefault();
current_index = $links.index($(this));
renderImage($(this));
$overlay.show();
});
$overlay.click(function(){
$overlay.hide();
})
$(".leftArrow").bind("click", function(e){
e.stopPropagation();
var image = $(".images a").eq(--current_index);
renderImage(image);
});
$(".rightArrow").bind("click", function(e){
e.stopPropagation();
var image = $(".images a").eq(++current_index);
renderImage(image);
});
function renderImage($link) {
var imageLocation = $link.attr("href");
var $captionText = $link.children("img").attr("alt");
$caption.text($captionText);
$image.attr("src", imageLocation);
// Hide next arrow if end of images array
if (current_index >= $links.length - 1) {
$rightArrow.hide();
} else {
$rightArrow.show();
}
// Hide prev arrow if beginning of images array
if (current_index <= 0) {
$leftArrow.hide();
} else {
$leftArrow.show();
}
}