In an earlier question I posted, someone mentioned that I can combine two handlers together to save myself from typing code twice. The two click handlers I have below do duplicate code, but I'm not sure how to organize them into one function so that when I click the left arrow button, the function knows I clicked the left button and responds accordingly, and likewise with the right arrow button. I imagine that I'll have an if statement but do I need to have each button run an argument through the function? How do I do that?
The code below loops through a list of images in the HTML and finds the appropriate image to place on the lightbox. I can go through the list from top to bottom and bottom to top. I can also move from the first child to the last child and vice versa. I'm just not sure if these two can be combined together or not.
These buttons are programmatically appended to the overlay.
var $arrowLeft = $('<button id="left" class="arrow">‹</button>');
var $arrowRight = $('<button id="right" class="arrow">›</button>');
Left and right arrow handlers:
//When left arrow is clicked
$arrowLeft.click(function() {
$('#imageGallery li a img').each(function() {
var galleryImage = $(this);
if (galleryImage.attr('src') === $image.attr('src')) {
var li = galleryImage.closest('li');
if (li.is(':first-child')) {
var gallery = li.parent();
var lastLi = gallery.children(':last-child');
var anchor = lastLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
} else {
var prevLi = li.prev();
var anchor = prevLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
}
return false;
}
});
});
//When right arrow is clicked
$arrowRight.click(function() {
$('#imageGallery li a img').each(function() {
var galleryImage = $(this);
if (galleryImage.attr('src') === $image.attr('src')) {
var li = galleryImage.closest('li');
if (li.is(':last-child')) {
var gallery = li.parent();
var firstLi = gallery.children(':first-child');
var anchor = firstLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
} else {
var nextLi = li.next();
var anchor = nextLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
}
return false;
}
});
});
HTML:
<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></li>
<li><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></li>
<li><img src="images/education.png" width="100" alt="Education by Chris Michel"></li>
<li><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></li>
<li><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></li>
<li><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></li>
<li><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></li>
<li><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></li>
<li><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></li>
<li><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></li>
<li><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
You may either use (as already answered) the target to determine the button.
You may also have two handlers which call the same function, I made an example to explain what I mean, I hope you understand the principle (Did not test it)
//When left arrow is clicked
$arrowLeft.click(function() {
moveImages(true);
});
//When right arrow is clicked
$arrowRight.click(function() {
moveImages(false);
});
function moveImages(topToBottom) {
var ttb = ':last-child';
if(topToBottom) {
ttb = ':first-child';
}
$('#imageGallery li a img').each(function() {
var galleryImage = $(this);
if (galleryImage.attr('src') === $image.attr('src')) {
var li = galleryImage.closest('li');
if (li.is(ttb)) {
var gallery = li.parent();
var aLi = gallery.children(ttb);
var anchor = aLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
} else {
var theLi;
if(topToBottom) {
theLi = li.next();
} else {
theLi = li.prev();
}
var anchor = theLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
}
return false;
}
});
};
Your callback have event parameter which contains which key has been pressed.
$('a').mousedown(function(f) {
if (f.which == 0) {
alert('left button')
}
else if(f.which == 2) {
alert("right click");
}
})
According to W3C its values should be:
Left button – 0
Middle button – 1
Right button – 2
Use e.target to find out which button was clicked.
Something along these lines:
$('a.arrows').on('click', function(e) {
// ... your common variables here
if(e.target.id === 'leftArrow') {
// ... your logic for left arrow
} else {
// ... your logic for right arrw
}
});
Where arrows is a class that you could put on your arrow buttons. Alternatively, you could bind your click handler to a parent element. Logic remains the same.
Try this : You can bind click event handler using id selector as shown below. You can identify the clicked button whether it is left or right using id of the button and create logic accordingly.
$(document).on('click','#left, #right' ,function() {
var id = $(this).attr('id');
var liCheck = ':first-child';
var childCheck = ':last-child';
//for right button swap the child and li check
if(id == 'right')
{
childCheck = ':first-child';
liCheck = ':last-child';
}
$('#imageGallery li a img').each(function() {
var galleryImage = $(this);
if (galleryImage.attr('src') === $image.attr('src')) {
var li = galleryImage.closest('li');
if (li.is(liCheck)) {
var gallery = li.parent();
var childLi = gallery.children(childCheck);
var anchor = childLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
} else {
var childLi = li.prev();
//for right button update child li
if(id == 'right')
{
childLi = li.next();
}
var anchor = childLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
}
return false;
}
});
});
Related
Short version: I need a button to carry out three seperate actions when clicked three times.
Long version: I have one page of my site where there is a little readable introduction with illustrations. I have a button that changes the first image to a second one when clicked once. When the user has finished reading the second image, clicking the same button then navigates to a different html location, using a multiclick function.
However, I need to add a third image to the introduction. I therefore need the button to change image1 to image2 on the first click, change image2 to image3 on the second click, then navigate to the next html location on the third click.
Is this possible? All of the multiclick solutions I've seen so far only cover two events. Or they use 'onclick', which I've been advised is bad practice. Can I modify the code I already have to add a third click action (maybe changing the value of calledonetime)? Or am I going in completely the wrong direction?
Working JS code for two actions:
<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});
var calledonetime = false;
function multiclick() {
if(calledonetime=== false) {
calledonetime = true;
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png"; } /* action on first click */
else {
window.location.href = "castleview.html"; /* action on second click */
}
}
</script>
The HTML:
<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" id="infoscreentext" alt="" />
</div>
<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>
You can use a switch:
var clickCount = 0;
function clickHandler () {
clickCount += 1;
switch (clickCount) {
case 1:
// do action #1
break;
case 2:
// do action #2
break;
case 3:
// do action #3
break;
}
}
Or you can use an Array:
var clickCount = -1;
var actions = [];
function action1 (e) { /* prevent default, switch to image 1 */ }
function action2 (e) { /* prevent default, switch to image 2 */ }
function action3 () { /* follow hyperlink */ }
actions.push(action1);
actions.push(action2);
actions.push(action3);
function clickHandler (event) {
clickCount += 1;
actions[clickCount](event);
}
I would say do it with three different clicks as below with css html and js
<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});
var image1 = document.getElementById("infoscreentext");
var image2 = document.getElementById("infoscreentext2");
var image3 = document.getElementById("infoscreentext3");
image1 && image1.addEventListener('click', () => {
image1.classList.add('hide');
image2.classList.remove('hide');
});
image2 && image2.addEventListener('click', () => {
image2.classList.add('hide');
image3.classList.remove('hide');
});
image3 && image3.addEventListener('click', () => {
window.location.href = "castleview.html";
});
</script>
.hide {
display: none;
}
<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
<img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
<img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
</div>
<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>
Yes this is possible and so easy but why do you use a boolean for that? I suggest using an Integer for that, so let's start:-
<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});
var clickedCount = 0;
function multiclick() {
clickedCount++;
if(clickedCount == 1) {
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png"; /* change image on first click */
var calledonetime[1];
} /* add 1 count to calledonetime */
else if(clickedCount == 2) {
var image = document.getElementById("inforscreentext2");
image.src="infoscreentext3.png"; } /* change image on second click */
else {
window.location.href = "castleview.html"; /* action on third click */
}
}
</script>
I've got an image modal that will work when I bind an event handler to an Id, but not when I apply it to a class to have it fire off of any image clicked.
Here is a portion of the html
<div class="column">
<img src="images/journalism-images/j1.jpg" class="grid-img" id="myImage">
<img src="images/journalism-images/j2.jpg" class="grid-img">
</div>
Here is my Javascript below
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var images = document.getElementById("myImage");
var close = document.querySelector(".image-modal-close");
function changeImage() {
img.src = modalImg.src;
}
images.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
changeImage();
}
so basically what is happening is whatever image I put the ID of #myImage on will fire the modal with the correct image src, but I can't fire the modal when I use something like-
document.querySelectorAll(".grid-img");
can anyone help me out?
var images = document.querySelectorAll(".grid-img");
for ( var index = 0; index < images.length; index ++ ) {
images[index].addEventListener("click",function(e) {
// Do whatever you need.
},false);
}
Or
var $images = $( '.grid-img' );
$images.on( 'click', function(e) {
// Do whatever you need.
});
Remember that querySelectorAll returns set of elements.
Use jquery for this:
$(".grid-img").on("click", function() {
//logic
}
QuerySelectorAll will return a set of elements.
If you want javascript:
document.getElementsByClassName("grid-img").addEventListener("click",function(e) {
//Your logic
}
You can also watch the Example of getElementsByClassName
Example of getElementsByClassBame:
var element = document.getElementsByClassName("grid-img");
element[0].addEventListener("click",function(e) {
//Your logic
}
element[1].addEventListener("click",function(e) {
//Your logic
}
I have two images which I need to toggle on clicking on the image.
<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png'
data-src='images/prof_arrow1.png' />
When the user click the image the src should get the value of data-swap and when you click again the src should change to data-src. This should keep happening just like a toggle. Any help appreciated.
$("#arrowRotate").click(function() {
var swapImage = $("#arrowGrey").attr("data-swap");
$("#arrowGrey").attr({
'src': swapImage,
id: 'arrowOrange'
});
});
This is where I have got so far.
Based on my understanding from your question, Hope this is the one you expect,
$("#arrowRotate").click(function() {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap",current);
});
DEMO Fiddle
Try This:
$("#arrowRotate").click(function(){
if($(this).attr('src')==$(this).attr('data-src'))
{
var a = $(this).attr('data-swap');
$(this).attr('src',a);
}
else
{
var b = $(this).attr('data-src');
$(this).attr('src',b);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='arrowRotate' src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg' data-swap='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg' data-src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg'>
This might help. I think this is the simplest way of swapping between images:
<img id="arrowRotate" src="images/img1.png" data-swap="images/img2.png" data-src="images/img1.png" onclick="swapImage()" />
function swapImage(){
var swapImage = $('#arrowRotate').attr('data-swap'),
currentImage = $('#arrowRotate').attr('src');
$('#arrowRotate').attr({
'src': swapImage,
'data-swap': currentImage
});
};
If I understand you right you can do it like this:
HTML
<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' data-src='images/prof_arrow1.png' data-swapped="false"/>
Javascript
$("#arrowRotate").click(function() {
var swapped = $(this).attr("data-swapped");
var init = 'false';
if(swapped === 'false'){
var swapImage = $(this).attr("data-swap");
init = true;
}else{
var swapImage = $(this).attr("data-src");
}
$(this).attr({
'src': swapImage,
'id': 'arrowOrange',
'data-swapped': init
});
});
I'm building a script that will, from a gallery, scroll and center an image after a mouse/keyboard event.
Once an image is "cliked", only the clicked image will be displayed and center on the screen, all others will be hidden.
Then, the user is able to click again in order to scroll to the next img.
Note: when the last img is fired, we will display the bottom of the page.
Report:
If we are only using the mouse, the script is working as I want.
If we are only using the bottom key, the script is working as I want.
If we are using the keyboard (many times) and after the mouse,
functions will be lauch many times. I think this is due to the .on
method (keydown click)
Does any one know how to handle this events to make them work together?
Here is an Jsfidle/example of it
HTML
<div id="galleries" class="">
<div id="pictures-content" class="1">
<img src="http://www.clipartbest.com/cliparts/RiA/jnd/RiAjnd9iL.png">
</div>
<div id="pictures-content" class="2">
<img src="http://www.clker.com/cliparts/v/N/K/k/N/3/number-2-design-md.png">
</div>
<div id="pictures-content" class="3">
<img src="http://www.clker.com/cliparts/x/B/x/Y/R/L/number-3-md.png">
</div>
<div id="pictures-content" class="4">
<img src="http://www.clker.com/cliparts/K/w/R/r/V/Z/number-4-md.png">
</div>
<div id="pictures-content" class="5">
<img src="http://www.bubblews.com/assets/images/news/23937009_1390558154.png">
</div>
<div id="pictures-content" class="6">
<img src="http://www.olneymiddle.milton-keynes.sch.uk/Year6/wp-content/uploads/2014/02/number-6-md-Copy.png">
</div>
<div id="pictures-content" class="7">
<img src="http://www.clker.com/cliparts/V/K/h/8/c/A/number-7-md.png">
</div>
<div id="pictures-content" class="8">
<img src="http://www.clker.com/cliparts/M/L/0/g/q/R/red-rounded-with-number-8-md.png">
</div>
<div id="pictures-content" class="9">
<img src="http://www.clker.com/cliparts/h/S/2/m/C/o/red-rounded-with-number-9-md.png">
</div>
</div><!-- galleries --!>
jQuery
presentation_mode_stop_scrolling = "off";
// Calling functions
$(document).ready(function(){
// Init the dom - add a class number to each img
init_dom_class();
var picture_to_center = "";
var key_press = "";
var counter =0;
var max = $("#galleries #pictures-content").length;
$("#galleries #pictures-content").off('click');
$("#galleries #pictures-content").on('click',undisplay_center_pictures);
//quit presentation mode + display all content + init variables on scroll event
$(window).scroll(function () {
if ((presentation_mode_stop_scrolling === "off")) {
$("#galleries #pictures-content").on('click');
var i=1;
// We are checking if we use to be in the presentation mode to removed it just once
// Also we display all the pictures again
var class_gall= $("#galleries").attr('class');
// display all content + init variables
if(class_gall=="picture_presentation") {
$("#galleries #pictures-content").each(function() {
$("#galleries ."+i+" img").animate({opacity:1});
i++;
});
$("#galleries").removeClass('picture_presentation');
$("#header").animate({opacity:1});
$("#description").animate({opacity:1});
$("#bottom_site").animate({opacity:1});
key_press == "";
}
}
});
//quit presentation mode + display all content + init variables on resize event
$(window).resize(function () {
if (presentation_mode_stop_scrolling === "off"){
//quit presentation mode
var i=1;
// We are checking if we use to be in the presentation mode to removed it just once
// Also we display all the pictures again
var class_gall= $("#galleries").attr('class');
if(class_gall=="picture_presentation"){
// console.log("QUITTING");
// console.log("class_gall: "+class_gall);
$("#galleries #pictures-content").each(function() {
$("#galleries ."+i+" img").animate({opacity:1});
i++;
});
$("#galleries").removeClass('picture_presentation');
$("#header").animate({opacity:1});
$("#description").animate({opacity:1});
$("#bottom_site").animate({opacity:1});
key_press == "";
}
}
});
$(document).keydown(function(eventkeyboard) {
eventkeyboard.preventDefault();
//eventkeyboard.which is set by jQuery for those browsers that do not normally support eventkeyboard.keyCode.
// WE HAVE TO RESET THIS VALUE OTHERWISE THE ANIMATION IS BROKEN
key_press = "";
var keyCode = eventkeyboard.keyCode || eventkeyboard.which;
// KEY UP
if (keyCode === 38) {
return false;
}
// KEY DOWN
if (keyCode === 40) {
// console.log("key down");
// Unbind the click eventkeyboard with the presentation_mode_stop_scrolling variable
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling);
// allow keyboard action when the scrolling animation is completed
if (presentation_mode_stop_scrolling === "off"){
// IF EACH OF THE IMAGES ARE VISIBLE WE START FROM THE BOTTOM
var class_galleries= $("#galleries").attr('class');
if(class_galleries=="picture_presentation"){
// console.log("key down - THERE IS AN ACTIVE IMAGE"); // ACTIVE IMG
// THERE IS AN ACTIVE IMAGE
key_press = "down_with_a_focus_image"; // define the key pressed
var picture_to_center = retrieve_the_selected_img(eventkeyboard,key_press); // get img to center
// console.log("picture_to_center: "+picture_to_center);
hide_all_website_items_except_img_to_center(picture_to_center); // hide all img except the img to center
scroll_to_the_new_picture_to_center(picture_to_center);
return false;
} else {
// console.log("key down - THERE ISN'T ANY ACTIVE IMAGE"); // NO ACTIVE IMG
key_press = "down_without_any_focused_image"; // define the key pressed
var picture_to_center = retrieve_the_selected_img(eventkeyboard,key_press); // get img to center
$('#galleries #pictures-content').css({'background-image' : 'none'}); // Removing the background loading img
$("#galleries").addClass('picture_presentation'); // Add the presentation
hide_all_website_items_except_img_to_center(picture_to_center); // hide all img except the img to center
scroll_to_the_new_picture_to_center(picture_to_center);
return false;
}
}
return false;
}
// KEY LEFT
if (keyCode === 37) {
return false;
}
// KEY RIGHT
if (keyCode === 39) {
return false;
}
});
// We are calling this function on click event
function undisplay_center_pictures(event) {
event.preventDefault();
$("#galleries #pictures-content").off('click');
var class_galleries = $("#galleries").attr('class'); // we check if an image is already center
// console.log("class_galleries: "+class_galleries);
var picture_to_center = retrieve_the_selected_img(event); // populate the picture_to_center with the selected img
// console.log("picture_to_center: "+picture_to_center);
// Manage the picture_presentation mode and return the next image to center
if ($("#galleries").attr('class') === "picture_presentation") {
// no key for the moment
var new_picture_to_center = show_and_get_new_picture_to_center_and_hide_previous(event,picture_to_center,max);
// console.log("new_picture_to_center: "+new_picture_to_center);
// var picture_to_center = show_and_get_new_picture_to_center_and_hide_previous(picture_to_center,max);
scroll_to_the_new_picture_to_center(new_picture_to_center);
} else {
// hide everything except the img with the picture_to_center class
hide_all_website_items_except_img_to_center(picture_to_center);
scroll_to_the_new_picture_to_center(picture_to_center);
// ADD THE PICTURE PRESENTATION CLASS TO ENTER TO THE PRESENTATION MODE
$("#galleries").addClass('picture_presentation');
}
};
// Init the dom - add a class number to each img
function init_dom_class() {
var i=1;
$("#galleries #pictures-content").each(function() {
$(this).addClass(""+i+"");
i++;
});
};
// return the selected img
function retrieve_the_selected_img (event,key_press){
event.preventDefault();
// We are using only the mouse for the moment so
// console.log("key_press: "+key_press);
if (key_press == "down_without_any_focused_image") {
// var picture_to_center = 1;
return 1;
}
else if (key_press == "down_with_a_focus_image") {
$("#galleries #pictures-content img").each(function() {
var all_class_galleries = $(this).css("opacity");
if (all_class_galleries==1){
picture_to_center = parseInt($(this).parent().attr('class'));
// DO SOMETHING ON IMG TO CENTER
picture_to_center = picture_to_center+1;
}
});
return picture_to_center;
}
else {
// mouse click event
return parseInt($(event.target).parent().attr('class'));
}
};
// hide everything except the img with the picture_to_center class
function hide_all_website_items_except_img_to_center(picture_to_center){
// console.log(picture_to_center);
console.log("hide_all_website_items_except_img_to_center");
// Make a condition redirect user to bottom of the page on last image and display all content
if(picture_to_center > parseInt($("#galleries #pictures-content").length)) {
// FADE IN ALL PICTURES
z=1;
$("#galleries #pictures-content").each(function() {
$("#galleries ."+z+" img").animate({opacity:1});
z++;
});
$("#header").animate({opacity:1});
$("#description").animate({opacity:1});
$("#bottom_site").animate({opacity:1});
// REMOVE THE presentation mode
$("#galleries").removeClass('picture_presentation');
$("body").scrollTo($(document).height(), 800, {
onAfter: function(){
setTimeout(function(){
presentation_mode_stop_scrolling = "off";
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling);
$("#galleries #pictures-content").on('click',undisplay_center_pictures);
},100);
}
});
} else {
$("#galleries #pictures-content").each(function() {
var all_class_galleries = parseInt($(this).attr('class'));
if(all_class_galleries!=picture_to_center) {
$("#galleries ."+all_class_galleries+" img").animate({opacity:0});
} else{
// $("#galleries ."+all_class_galleries+" img");
// With keyboard, we need to display the next img
$("#galleries ."+all_class_galleries+" img").animate({opacity:1});
}
});
$("#header").animate({opacity:0});
$("#description").animate({opacity:0});
$("#bottom_site").animate({opacity:0});
}
return true;
};
// Hide the previous current img + Update the picture to center variable with the new img value + return new picture to center
function show_and_get_new_picture_to_center_and_hide_previous(event,picture_to_center,max){
event.preventDefault();
console.log("show_and_get_new_picture_to_center_and_hide_previous");
// We hide the previous centered img + get new picture to center id
if (picture_to_center < max) {
$("#galleries ."+picture_to_center+" img").animate({opacity:0});
picture_to_center++;
}
else if (picture_to_center == max){
// We go to the bottom of the page
picture_to_center++; // we increment picture_to_center to go to the bottom of the page
// console.log("We have to scroll to the bottom");
// last_picture = 1;
}
// console.log("new picture to center: "+picture_to_center);
// FADE IN THE NEXT IMAGE
$("#galleries ."+picture_to_center+" img").animate({opacity:1});
return picture_to_center;
};
// last picture for keyboard
function scroll_to_the_new_picture_to_center(picture_to_center){
// Stop the user to be able to canceled the presentation mode by scrolling or resizing the window
// during the scrolling event
// Not working properly -> need to check
// console.log(picture_to_center);
console.log("scroll_to_the_new_picture_to_center");
console.log("counter: "+counter);
counter++;
presentation_mode_stop_scrolling = "on";
// Calculate the top margin to center the image inside the screen
var window_height = $(window).height();
var img_height = $("#galleries ."+picture_to_center+" img").height();
var offset = (window_height-img_height)/2;
var max = parseInt($("#galleries #pictures-content").length);
// console.log("max: "+max);
// We are scrolling to the bottom of the page
if(picture_to_center > max){
// FADE IN ALL PICTURES
// picture_to_center = 0;
z=1;
$("#galleries #pictures-content").each(function() {
$("#galleries ."+z+" img").animate({opacity:1});
z++;
});
$("#header").animate({opacity:1});
$("#description").animate({opacity:1});
$("#bottom_site").animate({opacity:1});
console.log("picture_presentation should be removed");
$("#galleries").removeClass('picture_presentation');
console.log("picture_presentation should be removed");
$("body").scrollTo($(document).height(), 800, {
onAfter: function(){
setTimeout(function(){
presentation_mode_stop_scrolling = "off";
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling);
$("#galleries #pictures-content").on('click',undisplay_center_pictures);
},100);
}
});
}
else{
$("body").scrollTo($('.'+picture_to_center), 800, {
offset:-offset,
onAfter: function () {
setTimeout(function(){
presentation_mode_stop_scrolling = "off";
// console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling);
// $("#galleries #pictures-content").on('click'); -> not working, we need to specify the function
$("#galleries #pictures-content").on('click',undisplay_center_pictures);
},100);
}
});
}
return true;
};
});
As the .on method was used to cath the "keydown" and the "click" event, I had to unbind the "click" event on the "keydown" event.
$(document).keydown(function(eventkeyboard) {
eventkeyboard.preventDefault();
$('#galleries #pictures-content').off('click');
... etc
I am trying to code my own image gallery using html css jquery. I have a modal window to show the clicked in images. Inside my modal window I have a previous and next button.
My question is how can i show the previous images or next images when someone click that button.
Here's my jsFiddle
jquery code i am using to show clicked in images.
$(function(){
$('.gallery a').click(function(evt) {
evt.preventDefault( );
var imgPath = $(this).attr('href');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',imgPath);
return false;
});
});
Add this to your jQuery.
Declare a variable current image in your function and keep current image saved in that variable. Update the variable whenever current image is changed.
Updated jsfiddle
Click on the second image in the images and see the prev and next image then.
$('.gallery-control-previous').click(function(){
var imgPath = current_img.prev().attr('href');
current_img = current_img.prev();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
$('.gallery-control-next').click(function(){
var imgPath = current_img.next().attr('href');
current_img = current_img.next();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
If you have understood this answer, add checks to the code showing next, prev elemments only when they exist.
You can find how to do that,
here..
Updated.
Get the first child of next row, and pass that.
$('.gallery-control-next').click(function(){
if(current_img.next().length){
current_img = current_img.next();
}else{
current_img = current_img.parents(".row").next(".row").find("a:first");
}
var imgPath = current_img.attr('href');
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
I have added img_no to each a tag to identify the current active image and get next or previous image
Working Demo
$(function () {
$('.gallery a').click(function (evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var img_no = $(this).attr('img_no');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src', imgPath).attr('img_no', img_no);
return false;
});
});
i = 1;
$('.row a img').each(function () {
$(this).attr('img_no', i);
$(this).parents('a').attr('img_no', i);
i++;
});
images_length = i - 1;
console.log(images_length);
$('.gallery-control-next').click(function () {
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no++;
if (img_no > images_length) {
img_no = 1;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
$('.gallery-control-previous').click(function(){
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no--;
if (img_no <= 0) {
img_no = images_length;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});