I have a list of images, I want to insert one image after each paragraph. Sometimes I have less images than paragraphs sometimes more. How do I loop through the img elements to insert them after a paragraph, and if there are too much images, leave them where they are?
$( ".img" ).insertAfter( "p" );
Without content the structure would look like this:
Before:
<div id="wrap">
<h2></h2>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
</div>
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
Result:
<div id="wrap">
<h2></h2>
<p></p>
<img class="img" />
<h2></h2>
<p></p>
<img class="img" />
<h2></h2>
<p></p>
<img class="img" />
</div>
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
You could use the .after() method:
var $img = $('.img');
$('#wrap p').after(function(i) { return $img.eq(i); });
http://jsfiddle.net/a7tchk5r/
Related
I have a container in which it is a horizontal scroll slider. I am just trying to figure how to show the element that is in the viewport at the time
I tried to look for left. I tried to put the slides in an array and look for the x axis but I am a little stumped.
This is my scroll function.
const scroll = () => {
const scrollContainer = document.querySelector('.slider');
scrollContainer.addEventListener('wheel', (e) => {
e.preventDefault();
scrollContainer.scrollLeft += e.deltaY;
});
};
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>demo</title>
</head>
<body>
<div class="slider hidden" id="slideshowContainer">
<div class="innerSlider" id="innerSlider">
<div class="slide">
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1586105251261-72a756497a11?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1618220048045-10a6dbdf83e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
</div>
</div>
</body>
</html>
Hi I am trying to figure out how to remove a div if the img src is empty.
I've searched on stackoverflow, but most are all jq based. Can someone help in vanilla javascript?
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80"
alt=""
class="imgCard"
color=""
/>
</div>
<div class="swiper-slide">
<img
src=""
alt=""
class="imgCard"
color=""
/>
</div>
</div>
Here how you can do this
const swipers = document.querySelectorAll('.swiper-slide');
swipers.forEach(e => {
const imgSource = e.querySelector('img').getAttribute('src');
if (imgSource.trim() === '') {
e.remove()
}
})
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="" class="imgCard" color="" />
</div>
</div>
You can get all images which are child of .swiper-slide class and check if their have src attribute different than an empty string like this
let imgs = document.querySelectorAll(".swiper-slide img");
imgs.forEach(item => {
if (item.getAttribute('src') === "") {
item.parentNode.remove();
}
});
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="First image alternate text" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="Second image alternate text" class="imgCard" color="" />
</div>
</div>
i have the following code in which i have images and on them i have dislike. i want to identify on which image the dislike has been clicked? how do i do that?
<div class="product_title">Levi's Men's Cotton T-Shirt</div>
<div class="product_img"><img src="images/T1.jpg" alt="" border="0" id="T1"/></div>
<div class="product_img"><img src="images/dislike.jpeg" onclick="getId();" align="right" id="d1"/></a></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab"> <img src="images/cart.gif" alt="" border="0" class="left_bt" /> <img src="images/favs.gif" alt="" border="0" class="left_bt" /> <img src="images/favorites.gif" alt="" border="0" class="left_bt" /> details </div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title">UB Stylish T-shirt</div>
<div class="product_img"><img src="images/T2.jpg" alt="" border="0" id="T2"/></div>
<div class="product_img"><img src="images/dislike.jpeg" alt="" border="0" align="right" id="d2"/></a></div>
<div class="prod_price"><span class="price">270$</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab"> <img src="images/cart.gif" alt="" border="0" class="left_bt" /> <img src="images/favs.gif" alt="" border="0" class="left_bt" /> <img src="images/favorites.gif" alt="" border="0" class="left_bt" /> details </div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title">Jacob n John T-Shirt</div>
<div class="product_img"><img src="images/T3.jpg" alt="" border="0" id="T3" /></div>
<div class="product_img"><img src="images/dislike.jpeg" alt="" border="0" align="right" id="d3"/></a></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div>
</div>
You can bind the dislike image button with onclick event. Find the id of the element and then use the id to find the product id.
As your markup is structured, id of element is di then corresponding id of product is ti.
Here is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Demo slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
</head>
<body>
<div id="sliderFrame">
<div id="slider">
<img src="images/image-slider-1.jpg" id="img1" alt="" />
<img src="images/image-slider-2.jpg" id="img2" alt="" />
<img src="images/image-slider-3.jpg" id="img3" alt="" />
<img src="images/image-slider-4.jpg" id="img4" alt="" />
<img src="images/image-slider-5.jpg" id="img5" alt="" />
</div>
</div>
<div id="custom_text">
<h1 style="color: blue;">Image 1 text</h1>
</div>
<div id="custom_text1">
<h1 style="color: blue;">Image 2 text</h1>
</div>
<div id="custom_text2">
<h1 style="color: blue;">Image 3 text</h1>
</div>
<div id="custom_text3">
<h1 style="color: blue;">Image 4 text</h1>
</div>
<div id="custom_text4">
<h1 style="color: blue;">Image 5 text</h1>
</div>
</body>
</html>
Using menucool's Javascript Image Slider library: link to site
I want to display different text on different images i tried it giving absolute and relative positions to div and img tag but unable to acheive the output.
The javascript slider function is the predefined function.Basically i want to achieve this
This is why you always read the documentation:
http://www.menucool.com/javascript-image-slider#view2
Captions are set through each slide image's alt attribute. If the
image is formatted as lazy loaded image, its caption can be defined by
the title or data-alt attribute:
HTML
<img src="//placehold.it/250x250" id="img1" alt="Caption one" />
<img src="//placehold.it/249x249" id="img2" alt="Caption two" />
<img src="//placehold.it/251x251" id="img3" alt="Caption three" />
<img src="//placehold.it/248x248" id="img4" alt="Caption four" />
<img src="//placehold.it/252x252" id="img5" alt="Caption five" />
JSFiddle Demo
i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?
(writing in javascript)
thanks as always :)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
Om Oss
Välj Design
<img id="Logo" src=LogotypHemsida.png>
Skapa Design
Hjälp
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
Välj Design
Skapa Design
Om Oss
Hjälp
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
Gilla oss på Facebook
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
Följ oss på Twitter
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>
You don't have to declare onclick for each img.
Try this: http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});
You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready
You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:
<div id="images" onclick="getSelectedImageURL(event);">
<input type="image" src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
</div>
To get current selected image SRC on click event...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}