I currently have a thumbnail gallery using onclick/jQuery/JavaScript, although it all works fine I think it will be confusing for the user to have to click a thumbnail to turn it on and then click it again to turn it off, before moving on to the next.
I currently have 8 thumbnails/larger images and I have typed this code out 8 times with different ids:
function toggle_visibility(chLoTog) {
var e = document.getElementById(chLoTog);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
I'm new to jQuery and I bet there is a way of not having to type this code out 8 times. What I really want the code to is:
Click a thumbnail and relevant image appears
Click on another thumbnail which hides current thumbnail and shows new thumbnail
To be able to this in a random order.
I hope all this makes sense.
You can achieve very simply with jquery using a class and a data attribute on the thumbnail ie.
// HTML
// Add a class and a data attribute to the gallery thumbnal image
<img class="gallery-thumbnail" src="path/to/gallery-thumbnail.jpg" data-img="path/to/gallery-image.jpg" />
// jquery
// Bind a click function to each thumbnail image
$('.gallery-thumbnail').click(function(){
// Hide all the currently showing gallery images
$('.gallery-image').hide();
// Get the id of the requested gallery image
var id = '#' + $(this).attr('data-imge');
// Show the requested gallery image
$(id).show();
}):
You could even bind a click function to each of the gallery images so that a user can hide them by clicking on the image itself ie.
// Hide gallery image when clicked
$('.gallery-image').click(function(){
$(this).hide();
});
Related
I have built an image gallery and want to allow users to click on the main image to get a full screen preview.
What I've done is get the image element and append it to my lightbox div which is semi-transparent, like so:
function get_image_preview(){
var lightboxBG = document.getElementById("product_preview");
var image_preview = document.getElementById("gallery_main_image");
lightboxBG.style.display = "block";
lightboxBG.appendChild(image_preview);
}
Is there a way to do this that isn't going to remove the original element from the screen? As it is it removes the image from the page and then adds it to the lightbox. As the lightbox is semi-transparent what users are seeing behind it is all messed up because the element was removed.
What I did to get around this is create a new Element and get the original image src and set that as an attribute for the newly created element.
function get_image_preview(){
var lightboxBG = document.getElementById("product_preview");
var image_src = document.getElementById("gallery_main_image").src;
lightboxBG.style.display = "block";
var new_image = document.createElement("img");
new_image.setAttribute("id", "preview_image");
new_image.setAttribute("src", image_src);
lightboxBG.appendChild(new_image);
}
Im adding a small function to my page where when you click a button it adds the corresponding image on the page after a certain class.
I have tried several approaches to this 'basic' problem. i have been working on this problem for two days now with no luck.
After clicking my buttons to get some interaction, I quickly recieve the 'Aw, Snap!' error from google. I know my computer can handle grabbing few images and displaying them on the page.
here is a part of my code thats most likely causing the trouble. Ive tried taking this part out of my code out and it helped. I didnt get the error message anymore, but it obviously stopped performing what i wanted it to.
var elem;
function placeImg(type) {
//creates and sets attributes for an img
elem = document.createElement("img");
elem.setAttribute("src", type+".png");
elem.setAttribute("height", "50");
elem.setAttribute("width", "40");
elem.setAttribute("alt", type +' logo image');
//puts image after the class original, its an input area
//there is only one class tag with the name original
$('#original').after(elem);
}
// when an ids with these names are clicked
$("#arrow, #barber, #gas, #lion, #none").click(function() {
//checks if the current input area has a length of 12 or less
if($('#'+findCurrentEditor()).val().length <=12){
placeImg(this.id); //places the image somewhere
}
});
Id appreciate anyone willing to try and help.
Thanks!
I only help you in creating image with jQuery and add it into a div by clicking a button. The rest, you can figure it out since it just some common logic.
$(".btn").on("click", function() {
var $image = $('<img />').attr({
src: 'https://c7.staticflickr.com/6/5820/30597229222_119e91f7e4_k.jpg',
height: "300",
width: "400"
})
$("div#img-wrapper").html($image);
});
see DEMO
In my page I am asking users to submit a poll by clicking on the respective options (radio button or check box). Now my options can be images, text, video or audio. Now actual problem is I need my option html div tag to select the radio button/check-box if user clicks anywhere on it, even on video/audio/image thumbnail. But the other requirement is if I click on the video/audio i need to play then using a modal and if user clicks on Image then I have to show the image in zoomed manner.
Both of these events should happen if user clicks on media as media is inside option html. To show Images I am using lightbox plugin and I am binding lightbox event to image tag as options are loading.
//option html : var eachQ = <div class="optionEntry">......</div>
if (media == 'image') { $('.mediaImage', eachQ).lightBox(); }
if (media == 'audio') { /*play audio*/ }
if (media == 'video') { /*play audio*/ }
$('.optionEntry', eachQ).click(function(event) {
alert("option selected")
//select the option
});
Now this code works fine for playing audio and videos as I am able to both play and select the option if I click on audio/video thumbnail, but if I click on image then I am watching the lightbox plugin image view and the option is not selected. Please let me know if any other info is needed to answer this nad thank you in advance. I am using dynamic html and adding that to optionEntry tag, that is as following;
var textType = '<div class="textType"><div class="tickHolder"></div><span class=text></span></div>';
var imgType = '<div class="imgType"><div class="tickHolder"></div><div class="mediaHolder"><img class="mediaImage"></img></div></div>';
var videoType = '<div class="videoType"><div class="tickHolder"></div><div class="mediaHolder"><img class="mediaVideo"></img> <div class="playIcon"></div></div></div>';
var audioType = '<div class="audioType"><div class="tickHolder"></div><div class="mediaHolder"><img class="mediaAudio"></img></div></div>';
In your form, wrap the object in a tag, like so:
<input type="checkbox" id="myCheckbox" name="myCheckbox">
<label for="myCheckbox"><img (or whatever)></label>
I am very new to JQuery and all I need is to select a image displayed in a website on mouse click and display a popup slider containing that image.
I am getting it done but on clicking next it loads from the first image rather than showing the next image.
My code:
http://jsfiddle.net/MT7Ag/
var myPos=0;
$('#btnNext').click(function() {
//copy this image to the placeholder
$('#mimg').attr('src', $('.images .display').eq(myPos).attr('src'));
myPos++;
if(myPos==$('.images .display').length) {
myPos = 0;
}
});
If I click safari means it has to load ie next but it loads firefox(the first one).
Can anyone help me?
Because your position starts at 0. So even if you click safari it will still show the first image. You need to change myPos according to the image you clicked
Using the jquery index function you can find the index of the clicked element and update myPos.
$('.display').click(function() {
myPos = $('img').index(this)+1;
var sr=$(this).attr('src');
$('#mimg').attr('src',sr);
$('#myModal').show();
$('.modal').show();
});
http://jsfiddle.net/MT7Ag/1
I am looking for a javascript function that works based around an array of dynamically generated images. At the moment I have a preview window.
When this is clicked I would like it to hide the preview window and load the first image in the array. I would the like to be able to navigate through the remaining images in the array.
If someone could point me in the right direction or if you know how to put this together it would be much appreciated. Thanks.
You could dynamicly create an image element and keep on using that, something like this? (this is using jQuery).
<button id='nextImage'>Load nect image</button>
<div id='imageContainer'><div id='previewWindow'>Preview</div></div>
//Javascript frome here (JQuery)
var images = Array();
images.push('url/to/image.jpg');
window.lastImage=-1;
$('#previewWindow').click( function() { ('#nextImage').click(); });
$('#nextImage').click( function() {
window.lastImage += 1;
if(typeof(images[window.lastImage]) == 'undefined') { return; } //if endof array
$('#previewWindow').remove(); //better is to only do this once
$('#image').remove(); //Only creating an image once is even better
$('<img />')
.attr('id', 'image')
.attr('src', images[window.lastImage])
.appendTo('#imageContainer');
});
EDIT
Just read you would like to able to click the preview window, added that.