I have an image gallery with 6 images that I use Javascript to control. When you click on an image it fades out and the new one loads in. The thumbnails are in a "gallery" div, the main image is displayed in an empty "photo" div.
I cant figure out how to get a paragraph to load with the corresponding image. For instance, I want to load an image but also have a paragraph of text, specific to that image, load with it.
Would this have to be done with an array? I need some ideas. Here is the Javascript and the html.
$('#gallery a').click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();
<div id="photo">
</div>
<div id="gallery">
<img src="images/home1.jpg" alt="home 1">
<img src="images/home2.jpg" alt="home 2">
<img src="images/home3.jpg" alt="home 3">
<img src="images/home4.jpg" alt="home 4">
<img src="images/home5.jpg" alt="home 5">
<img src="images/home6.jpg" alt="home 6">
</div>
I want to point out that everything works. I am just lost as to where to start in order to load different paragraphs in with the proper image that is loaded when clicked. Here is the live site if interested:
Live site that you can view what is working already
you can a put a paragraph inside the anchor tag with a display:none style like this:
<div id="gallery">
<a href="images/home1_h.jpg">
<img src="images/home1.jpg" alt="home 1">
<p style="display:none">this is a paragraph</p></a>
</div>
and in your script you get the paragraph content and display it with the image
var paragraph=$(this).find("p:first").text();
in your html add a div for your paragraph:
<div id="photo"></div>
<div id="paragraph"></div>
in your javascript you should fill in this div:
$('#gallery a').click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
var paragraph=$(this).find("p:first").text();
newImage.hide();
$('#photo').prepend(newImage);
$('#paragraph').html(paragraph);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();
Related
I've some images with 'alt' tag and I want to extract 'alt' tag for every img and create a <span> + alt tag + </span> line after each img. I don't know how to do it with jQuery.
The result should be the following:
<img alt="Madrid" class="gallery__block vertical" src="1.jpg">
<span>Madrid</span>
<img alt="Paris" class="gallery__block vertical" src="2.jpg">
<span>Paris</span>
<img alt="Rome" class="gallery__block vertical" src="3.jpg">
<span>Rome</span>
Thank you very much for any help
So select the image, loop over, read the attribute, and insert a new element.
$("img").each(function(){
var img = $(this);
var span = $("<span/>");
span.text(img.attr("alt"));
img.after(span);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img alt="Madrid" class="gallery__block vertical" src="http://placekitten.com/100/100">
<img alt="Paris" class="gallery__block vertical" src="http://placekitten.com/100/100">
<img alt="Rome" class="gallery__block vertical" src="http://placekitten.com/100/100">
This can be done using this:
$("img.gallery__block").each(function() {
var $image = $(this);
var $altTag = $image.attr('alt');
var $span = $("<span></span>");
$span.append($altTag);
$image.after($span);
});
I'm using this Image Gallery Plugin. I need to populate the Images via JavaScript. I tried some methods. But it is not working.
Can someone suggest me a way to populate Images via JavaScript.
var img1 = "https://picsum.photos/600.jpg?image=251";
var img2 = "https://picsum.photos/600.jpg?image=252";
var img3 = "https://picsum.photos/600.jpg?image=253";
var c1 = document.getElementById('c1');
c1.src = img1;
<div class="example" id="exampleZoomGallery" style="display: flex;">
<a class="inline-block" href="../../global/img/heart.jpg" title="view-7" data-source="../../global/img/heart.jpg">
<img id="c1" class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
</a>
<a class="inline-block" href="../../global/img/heart.jpg" title="view-8" data-source="../../global/img/heart.jpg">
<img id="c2" class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
</a>
<a class="inline-block" href="../../global/img/heart.jpg" title="view-9" data-source="../../global/img/heart.jpg">
<img class="img-responsive" src="../../global/img/heart.jpg" alt="..." width="220" style="padding: 5px;" />
</a>
</div>
How about something like this? https://jsfiddle.net/weazk35f/22/
Create a container to place your images in...
<div class="example" id="exampleZoomGallery" style="display: flex;"></div>
then store all of the images in an array and get a reference to the container...
var images = [
'https://picsum.photos/600.jpg?image=251',
'https://picsum.photos/600.jpg?image=252',
'https://picsum.photos/600.jpg?image=253'
];
var gallery = jQuery('#exampleZoomGallery');
Next create a function to populate an image...
function populateImage(src, container) {
var a = jQuery('<a></a>');
a.attr('href', src);
a.attr('data-toggle', 'lightbox');
// Optional but allows for navigation between images within lightbox
a.attr('data-gallery', container.attr('id'));
var img = jQuery('<img />');
img.attr('src', src);
a.append(img);
container.append(a);
}
and finally iterate over each of the images in your array when the DOM is ready and initialize your lightbox plugin
jQuery(document).ready(function($) {
$(images).each(function(index, image) {
populateImage(image, gallery);
});
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
});
I have a div clalled product_main_img that is the full standalone image. I then have four thumbnail images that are underneath switch when clicked switch with the main image to become the full displayed image.
What I need to accomplish is have the standalone image (the first one on page load) change to the image that is being clicked, and then have the standalone image move into the thumbnail section.
I have the thumbnails moving into the main div area, but the standalone image is then disappearing.
div class="product_visuals">
<div class="product_main_img">
<div class="main_img_switch"><img src="/images/main_img.jpg"></div>
</div>
<div class="product_selection">
<div class="product_details">
<img src="/images/img_01.jpg">
</div>
<div class="product_details">
<img src="/images/img_02.jpg">
</div>
<div class="product_details">
<img src="/images/img_03.jpg">
</div>
<div class="product_details">
<img src="/images/img_04.jpg">
</div>
</div
script:
$('.product_details img').click(function() {
$('.main_img_switch img').attr("src", $(this).attr("src"));
});
save a reference of the standalone image in a variable, something like this:
$('.product_details img').click(function() {
var mainImg = $('.main_img_switch img');
var tempSrc = mainImg.attr("src");
mainImg.attr("src", this.src));
this.src = tempSrc;
});
This is a little bit different than another question I just had answered. i want
<img style="float:right;" src="/explore_btn.png"> to trigger the large image to load in the <div id="show_area">. So if achor has id="list" then load that image in show_area when explore_btn.png is clicked for that container. there will be 12 different containers with thumbnails. How can I do this correctly
<script>
$('#list img').on('click',function(){
var old_img = this.src;
var new_img =old_img.split('-150x150').join('')
$('#show_area').html('<img src="'+new_img+'" />');
});
</script>
<div id="show_area"> large image here </div>
<div class="container1">
<a id="list" href="#">
<img style="float:left;" src="/escher_full-150x150.png" width="150" height="150" />
</a>
<div class="search_desc">
<strong>Escher</strong><br><br>
<!-- clicking explore_btn will load escher_full.png in the show_area div -->
<img style="float:right;" src="/explore_btn.png">
</div>
</div>
<div class="container2">
<a id="list" href="#">
<img style="float:left;" src="/footer_full-150x150.png" width="150" height="150" />
</a>
<div class="search_desc">
<strong>footer</strong><br><br>
<img style="float:right;" src="/explore_btn.png">
</div>
</div>
Change all id="list" to class="list" (because ID's must be unique) and then use this:
$('.list img').on('click',function(){
You can read this about ID attribute. You could actually change all the <a> elements with <div> instead... or why do you want to have <a> ?
So your code should look like:
<script>
$(document).ready(function () {
$('.list img').on('click', function () {
var old_img = this.src;
var new_img = old_img.split('-150x150').join('')
$('#show_area').html('<img src="' + new_img + '" />');
});
$('.search_desc img').on('click', function () {
var origin = $(this).parents('div.search_desc').parent().find('img:first')[0];
var old_img = origin.src;
var new_img = old_img.split('-150x150').join('')
$('#show_area').html('<img src="' + new_img + '" />');
});
});
</script>
I wrapped your code in a ready function so it's loaded after the page finished loading.
FIDDLE for testing
I have a image gallery I am trying to make So far so good as it works fine. My problem is that no matter how I try, I cannot get each image to have its own caption when I swap them out using javascript. Now before anyone gets upset with me for this question, I have looked on here and found how some people add captions using html but when I swap the images taht wont work. I thought maybe create an empty div and insert the html text using javascript, but how can I get the caption to load that matches the appropriate pic? Is an array the only option here? Here is my page in question.
My site
I leave the "photo" div empty so the image can load into it. So far everything works. Just confused on the captioning.
Here is the javascript code
$('#gallery img').each(function(i) {
var imgFile = $(this).attr('src');
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');
$(this).hover(
function() {
$(this).attr('src', preloadImage.src);
},
function () {
var currentSource=$(this).attr('src');
$(this).attr('src', imgFile);
}); // end hover
}); // end each
$('#gallery a').click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();
And my html
<div id="main"> <!-- Main Content -->
<div id="photo">
</div>
<div id="gallery">
<img src="images/home1.jpg" alt="home 1">
<img src="images/home2.jpg" alt="home 2">
<img src="images/home3.jpg" alt="home 3">
<img src="images/home4.jpg" alt="home 4">
<img src="images/home5.jpg" alt="home 5">
<img src="images/home6.jpg" alt="home 6">
</div>
</div>
I would do it like this
$('#gallery img').click(function(evt) {
var elem = $(this);
var oldImage = $('#photo img');
$('#photo').prepend($('<img src=" ' + elem.attr('src') + ' ">').hide().fadeIn(1000));
oldImage.fadeOut(1000,function(){
$(this).remove();
$("#caption").html(elem.attr('alt')); // set the caption
});
});
$('#gallery img:first').trigger('click');
and as html
<div id="main"> <!-- Main Content -->
<div id="photo">
<div style="text-align:center" id="caption"></div>
</div>
<div id="gallery">
<img src="images/home1_h.jpg" alt="home 1">
<img src="images/home2_h.jpg" alt="home 2">
<img src="images/home3_h.jpg" alt="home 3">
<img src="images/home4_h.jpg" alt="home 4">
<img src="images/home5_h.jpg" alt="home 5">
<img src="images/home6_h.jpg" alt="home 6">
</div>
</div>
and a bit of css
#gallery img {
opacity: 0.8;
cursor: pointer;
}
#gallery img:hover {
opacity: 1
}