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();
});
});
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 am trying to make a simple image gallery test. I want there to be four thumbnail images. When any of them is clicked, it will change the image source of the big image to the correct corresponding image, but I am having problems trying to achieve this.
Here is what i have so far:
HTML
<body>
<section id="gallery">
<div id="sidebar">
<a id="image1" href=""><img src="images/blue_small.jpg"></a>
<a id="image2" href=""><img src="images/red_small.jpg"></a>
<a id="image3" href=""><img src="images/green_small.jpg"></a>
<a id="image4" href=""><img src="images/orange_small.jpg"></a>
</div>
<div id="enlarged">
<img id="bigImage" src="images/blue_large.jpg" >
</div>
</section>
<script src="test.js"></script>
</body>
JavaScript
function imageSelect () {
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
var image3 = document.getElementById("image3");
var image4 = document.getElementById("image4");
var bigImage = document.getElementById("bigImage");
if (image1.clicked == true) {
bigImage.src = "images/blue_large.jpg";
} else if (image2.clicked == true) {
bigImage.src = "images/red_large.jpg";
} else if (image3.clicked == true) {
bigImage.src = "images/green_large.jpg";
} else if (image2.clicked == true) {
bigImage.src = "images/orange_large.jpg";
}
};
imageSelect();
Thanks for any help.
Javascript:
function imageSelect(imageSrc) {
var newImage = imageSrc;
document.getElementById("bigImage").src = newImage;
return false;
};
Html:
<section id="gallery">
<div id="sidebar">
<a id="image1" href="#" onclick="imageSelect('blue_big.png');"><img src="blue_small.png"></a>
<a id="image2" href="#" onclick="imageSelect('red_big.png');"><img src="red_small.png"></a>
<a id="image3" href="#" onclick="imageSelect('green_big.png');"><img src="green_small.png"></a>
<a id="image4" href="#" onclick="imageSelect('orange_big.png');"><img src="orange_small.png"></a>
</div>
<div id="enlarged">
<img id="bigImage" src="te5.png" >
</div>
</section>
Everything seems in order. But you do need to listen for onclick event and fire your imageSelect() function then.
What results are you getting? We do not have much to work with. The code looks good except I would add another left brace before the 'if' condition and its closing brace before your final closing brace. This isolates the 'if' function from the image loading. Also, what is driving/calling the 'imageSelect()' function?
I just now noticed that your images are not being called by their implicit name. Add their names to those function calls and it should work.
Here is a variation on the theme that adds a bit of complexity if you needed a more robust solution.
<section id="gallery">
<div id="sidebar">
<ul>
<li>
<img src="http://placehold.it/100x100" class="small" data-key="aaa" />
</li>
<li>
<img src="http://placehold.it/100x100" class="small" data-key="bbb" />
</li>
<li>
<img src="http://placehold.it/100x100" class="small" data-key="ccc" />
</li>
<li>
<img id="four" src="http://placehold.it/100x100" class="small" data-key="ddd"/>
</li>
</ul>
</div>
<div id="enlarged">
<img id="big" src="http://lorempixel.com/h/600/410/" >
</div>
</section>
--
var big = document.getElementById("big");
var imgsrc = {
'aaa' : 'http://lorempixel.com/d/600/410/',
'bbb' : 'http://lorempixel.com/e/600/410/',
'ccc' : 'http://lorempixel.com/f/600/410/',
'ddd' : 'http://lorempixel.com/g/600/410/'
};
function imageSelect (target) {
var img = new Image();
img.src = imgsrc[target.dataset.key];
img.onload = function(){
big.src = img.src;
}
};
document.body.addEventListener("click", function (event) {
if (event.target.classList.contains("small")) {
imageSelect(event.target);
}
});
A couple key points :
use delegated events to minimize handler logic
access stored data from minimal markup attributes
provide for some kind of transition with a load handler
With these very basic features, you could support any number of different requirements (and without jquery).
Fiddle
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();
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
}