i want to select all the images of a website
var images = $('img')
but in some websites, some images repeat, so basically what i'd like to know is
How can i select all the images in a website(repeating and non-repeating) only once.
For example, the website has
<img src="link 1">
<img src="link 2">
<img src="link 1">
<img src="link 3">
<img src="link 1">
and i wish to only select
<img src="link 1">
<img src="link 2">
<img src="link 3">
Loop through them, check if you've already stored it, if not: add.
let $images = $('img');
let uniqueSrc = [];
$images.each(function(){
if( !uniqueSrc.includes( this.src ) ){
uniqueSrc.push( this.src );
}
});
JavaScript (no jQuery)
let imgs = document.images,
imgCount = imgs.length,
src = null,
urls = [];
for (; imgCount--; ) {
src = imgs[imgCount].src;
if (urls.indexOf(src) === -1) {
urls.push(src);
}
}
https://developer.mozilla.org/en-US/docs/Web/API/Document/images
Related
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();
});
});
Good day, I'm trying to make an article content with ckeditor. Here is an example from my input.
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
As you can see there are two images, and i want to the first image as my thumbnail. for now, i just want to extract it .
The result from extract is something like this
http://localhost:84/lf//assets/images/commingsoon.png
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = (someprosess)
You can use find(), first() and attr() to access the URL of the first image from your string.
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = $(myString).find('img').first().attr('src');
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use either JavaScript or jQuery to search for the first instance of an image and parse out its src
As an example, using jQuery (if there is always going to be an image in the content)
var imgPointer = $('body').find('img');
var imgSrc = imgPointer[0].attr('src');
Here you go with a solution using jQuery
console.log($('p').find('img:first').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
Hope this will help you.
How could I make it that if someone clicks the image of the selected product to change the url of the button under the images
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
text/image for amusement only, they are not really the products
What I have tried
window.onload = function() {
var sel = document.getElementById('product');
sel.onchange = function() {
document.getElementById("buy").href = "https://amazon.com/" + this.value;
}
}
Here's a codepen http://codepen.io/anon/pen/bdyWGa
Jquery solution:
$(function(){
$("img").click(function(){
$("#buy").attr("href","https://amazon.com/"+$(this).attr("value"));
});
});
Javascript Version:
var images = document.getElementsByTagName("img");
for (var i=0, len=images.length, img; i<len; i++) {
img = images[i];
img.addEventListener("click", function() {
document.getElementById("buy").setAttribute("href", "https://amazon.com/"+ this.getAttribute("value"));
alert("New href value: " + "https://amazon.com/"+ this.getAttribute("value"));
});
}
Working fiddle: http://codepen.io/anon/pen/NqVjGY
<img id="img1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img id="img2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img id="img3" src="http://placehold.it/300x100?text=Crack" alt="" />
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
and:
$("#img1").on("click", function(){
$("#buy").attr("href","https://mynewurl.net");
});
here you describe clicking on which img will change url to what
In javascript. Use e.target for take the current click element and get the value using attrubutes and apply to the href attribute.
window.onload = function() {
var sel = document.getElementById('product');
sel.onclick = function(e) {
console.log( e.target.attributes[0].value)
document.getElementById("buy").setAttribute('href', "https://amazon.com/" + e.target.attributes[0].value) ;
}
}
CodeOpen
Use jQuery to add a click event to all images to fetch the property value and add as an addition to href property of the intended element
$(function(){
$('img').on('click', function(){
$('#buy').attr('href',"https://amazon.com/" + $(this).attr('value'));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
I have series of images that I want to play them as a series of animation in html
<img src='image1.png' />
<img src='image2.png' />
<img src='image3.png' />
<img src='image4.png' />
<img src='image5.png' />
<img src='image6.png' />
<img src='image7.png' />
<img src='image8.png' />
<img src='image9.png' />
<img src='image10.png' />
<img src='image11.png' />
<img src='image12.png' />
They all need to on the same position but just swap very fast from image 1 to image 12 to make it looks like an animation.
Is there a way to do this properly? I have searched google but had no luck. Thanks for the help!
The best way is only to have one Image and only change the image src attribute. Like
<img src="image1.png" id="animationImage" />
Afterwards you can simply change for example with an setInterval:
var imageId = 1;
window.setInterval("changeImage()", 100);
function changeImage(){
imageId++;
if (imageId > 12)
imageId = 1;
$("#animationImage").attr("src", "image" + imageId + ".png");
// if you are NOT using jQuery, use this line instead:
document.getElementById("animationImage").src = "image" + imageId + ".png"
}
of course you can also simply hide/add the images:
HTML
<img src="image1.png" class="animationImage" />
<img src="image2.png" class="animationImage" />
<img src="image3.png" class="animationImage" />
<img src="image4.png" class="animationImage" />
<img src="image5.png" class="animationImage" />
<img src="image6.png" class="animationImage" />
<img src="image7.png" class="animationImage" />
<img src="image8.png" class="animationImage" />
<img src="image9.png" class="animationImage" />
<img src="image10.png" class="animationImage" />
<img src="image11.png" class="animationImage" />
<img src="image12.png" class="animationImage" />
Javascript:
$(".animationImage:not(:first)").hide();
var imageId = 0;
window.setInterval("changeImage()", 100);
function changeImage(){
$($(".animationImage")[imageId]).hide();
imageId++;
if (imageId > 11)
imageId = 0;
$($(".animationImage")[imageId]).show();
}
In both examples, the number 100 represents the amount of milliseconds the application will wait before showing the next image.
Edit The last solution assumes to use the jQuery library.
Note: jQuery is required for this solution
I will do this using jQuery:
function swap()
{
var images = $("img");
var on = false;
for(var i = 0; i < images.length; i++)
{
if($(images[i]).css("display") != "none")
{
on = true;
$(images[i]).css("display", "none");
}
else if(on)
{
on = false;
$(images[i]).css("display", "block");
}
}
if(on)
{
$(images[i]).css("display", "block");
}
}
This will swap each image to the next in order when called:
$(document).ready(function(){
setInterval(function(){swap();}, 1000/30);
});
JSFiddle
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
}