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
}
Related
I am having difficulty to capture div which has multiple images as an image and save it in local folder with default name.Can anybody help me please?
Js Code
$(document).ready(function() {
$("#btn-one").click(function(){
//var testdiv = document.getElementById("testdiv");
html2canvas($("#rocket-image"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
});
HTML code
<div id="rocket-image" class="rocket-holder">
<img id="mainDeckel" src="images/image-1.png" alt="" >
<img id="mainKorper" src="images/image.png" alt="" >
<img id="mainAccess" src="images/image.png" alt="" >
img id="mainDusen" src="images/image.png" alt="" >
</div>
<a id="btn-one" href="" class="btn-one">Capture</a id=""> </div>
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 am using jQuery to swap between images on and off hover. Here is my code.
HTML
<img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt="">
jQuery
$(".commentImg").hover(function() {
var swap = $(this).attr("data-swap");
$(this).attr('src', swap);
},
function() {
var swap = $(this).attr("data-swap");
$(this).removeAttr(swap);
});
the mouseover works fine, but the mouseout doesn't. Can you guys help me out?
You need to store it
//store current src in a attribute
$(".commentImg").attr('data-src', function() {
return $(this).attr('src');
})
$(".commentImg").hover(function() {
var swap = $(this).attr("data-swap");
$(this).attr('src', swap);
}, function() {
var src = $(this).attr("data-src");
$(this).attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="commentImg" src="//placehold.it/64/ff0000" data-swap="//placehold.it/64/ff00ff" />
<img class="commentImg" src="//placehold.it/64/00ff00" data-swap="//placehold.it/64/ffff00" />
<img class="commentImg" src="//placehold.it/64/0000ff" data-swap="//placehold.it/64/00ffff" />
I found another solution which do accomplish the task and is also useful if you have many images. Here is the code. Might help someone out there,
HTML
<div class="large-8 columns commentWrap">
<img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt="">
<p class="inline_cmt">Comments (3)</p>
</div>
<div class="large-2 columns inline_rply">
<img class="replyImg" src="images/reply.png" data-swap="images/reply_hover.png" alt="">
<p class="dash_reply">Reply</p>
</div>
<div class="large-2 columns reportWrap">
<img class="reportImg" src="images/report.png" data-swap="images/report_hover.png" alt="">
<p class="inline_rep">Report</p>
</div>
jQuery
var sourceSwap = function() {
var $this = $(this);
var newSource = $this.data('swap');
$this.data('swap', $this.attr('src'));
$this.attr('src', newSource);
}
$('.commentImg').hover(sourceSwap, sourceSwap);
$('.replyImg').hover(sourceSwap, sourceSwap);
$('.reportImg').hover(sourceSwap, sourceSwap);
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 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();