This is what I have for jquery
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
Here is my HTML
<div id="slides">
<img height="440" width="384" src="img/example-frame.png" alt="Example Frame" id="frame">
<div class="slides_container">
<img src="images/slidephotos/race_slide_photos/GS_slide.png" width="395" height="330" alt="Slide 1" />
<img src="images/slidephotos/race_slide_photos/RD_slide.png" width="395" height="330" alt="Slide 2" />
<img src="images/slidephotos/race_slide_photos/VH_slide.png" width="395" height="330" alt="Slide 3" />
<img src="images/slidephotos/race_slide_photos/FHH_slide.png" width="395" height="330" alt="Slide 4" />
<img src="images/slidephotos/race_slide_photos/HC_slide.png" width="395" height="330" alt="Slide 5" />
<img src="images/slidephotos/race_slide_photos/CR_slide.png" width="395" height="330" alt="Slide 6" />
<img src="images/slidephotos/race_slide_photos/CC_slide.png" width="395" height="330" alt="Slide 7" />
<img src="images/slidephotos/race_slide_photos/BB_slide.png" width="395" height="330" alt="Slide 8" />
</div>
<img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev" /> <img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next" />
</div>
You can see on the first image ive tried to make it link, but its a no go.
Any help would be greatly appreciated, Thanks
Depending on what plugin you are using, there may already be a built-in way to do this, but one option would be to add data attributes to your images containing the url you want to link to:
<img src="images/slidephotos/race_slide_photos/FHH_slide.png" width="395" height="330" alt="Slide 4" data-link="http://www.yoursite.com" />
Then you would add a click event handler to the images like this:
$(document).on('click', '.slides_container img', function(){
var url = $(this).data('link');
if (typeof url !== 'undefined')
{
window.location.href = url;
}
});
Related
I have this Codepen demonstrating how to do it with jQuery. I tried to do it with vanilla Javascript but couldn't get it to work. How would you go about this in plain ES6?
HTML:
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>
Javascript:
$(document).ready(function () {
// Scan the webpage for all class names of 'external'.
$(".external").each(function () {
// For each class name of 'external' found, find descendant tag "a" of that div and apply the rel attribute.
$(".external a").attr("rel", "external noopener");
});
});
You can just do document.querySelectorAll('.external a').forEach to iterate over all of them:
document.querySelectorAll('.external a').forEach((el) => {
el.setAttribute('rel', 'external noopener');
});
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>
I'm trying to create a full screen slideshow with images in a loop with chocolat js.
The getting started documentation says to start with:
<div class="chocolat-parent" data-chocolat-title="set title">
<a class="chocolat-image" href="series/1.jpg" title="caption image 1">
<img class="chocolat-open" width="100" src="series/1.jpg" />
</a>
<a class="chocolat-image" href="series/2.jpg" title="caption image 2">
<img width="100" src="series/2.jpg" />
</a>
<a class="chocolat-image" href="series/3.jpg" title="caption image 3">
<img width="100" src="series/3.jpg"/>
</a>
</div>
My javascript is like this:
$(document).ready(function(){
$('.chocolat-parent').Chocolat({
loop: true,
imageSize: 'cover',
});
});
But how can I make it automatically open and loop?
Please check the code below for the demo.
for more details, you can check the documentation
This is what you need
$(document).ready(function(){
var instance = $('.chocolat-parent').Chocolat({
loop: true,
fullScreen : true,
imageSize: 'cover',
}).data('chocolat');
instance.api().open();
window.setInterval(function(){
instance.api().next();
},2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chocolat/0.4.19/css/chocolat.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chocolat/0.4.19/js/jquery.chocolat.min.js"></script>
<div class="chocolat-parent" data-chocolat-title="set title">
<a class="chocolat-image" href="https://i.stack.imgur.com/C5xFh.jpg" title="caption image 1">
<img class="chocolat-open" width="100" src="https://i.stack.imgur.com/C5xFh.jpg" />
</a>
<a class="chocolat-image" href="https://i.stack.imgur.com/kbOvd.jpg" title="caption image 2">
<img width="100" src="https://i.stack.imgur.com/kbOvd.jpg" />
</a>
<a class="chocolat-image" href="https://i.stack.imgur.com/jjOFl.jpg" title="caption image 3">
<img width="100" src="https://i.stack.imgur.com/jjOFl.jpg"/>
</a>
</div>
you can use like this
<script>
$(document).ready(function(){
var instance = $('#example1').Chocolat({
loop: true,
imageSize: 'cover',
}).data('chocolat');
instance.api().open();
setInterval(function(){ instance.api().next();}, 3000);
});
</script>
Below is my HTML:
<div id="mover">
<img src="images/building3.jpg" width="330" height="150" />
<img src="images/building5.jpg" width="330" height="150" />
<img src="images/building1.jpg" width="330" height="150" />
<img src="images/building4.jpg" width="330" height="150" />
</div>
Using:
document.getelementById("mover");
only gives me this div, how can I get all the images from this div using JavaScript?
Let me know if this works out for you:
<html>
<body>
<div id="mover">
<img src="images/building3.jpg" width="330" height="150" />
<img src="images/building5.jpg" width="330" height="150" />
<img src="images/building1.jpg" width="330" height="150" />
<img src="images/building4.jpg" width="330" height="150" />
</div>
<script>
var imgs = document.getElementById("mover").getElementsByTagName("img");
for (i in imgs) {
if (parseInt(i) > -1) { // check if it is an integer
alert(document.getElementById("mover").getElementsByTagName("img")[i].src);
}
}
</script>
</body>
</html>
I am designing a template in Channel Advisor for an eBay store and it doesn't allow jQuery.
I used JSSOR (non-jQuery one) for my slider in order to make it responsive and swipe/touch friendly.
When I use template tags in like:
<img src="{{ITEMIMAGEURL1}}"/>
<img src="{{THUMB(ITEMIMAGEURL1)}}"/>
I have 10 of {{ITEMIMAGEURL1}} and {{THUMB(ITEMIMAGEURL)}} tags number from 1-10 in the slider template, {{ }} are the image paths from Channel Advisor. In order to have this gallery work on all current listings, I need to delete some of the div tags correspond to how many images an ad has/uploaded to channel advisor.
Lets say I have this:
<div>
<div>
<img u="image" src="{{ITEMIMAGEURL1}}">
<img u="thumb" src="{{THUMB(ITEMIMAGEURL1)}}">
</div>
<div>
<img u="image" id="galleryImage2" src="{{ITEMIMAGEURL2}}">
<img u="thumb" id="thumbnail2" src="{{THUMB(ITEMIMAGEURL2)}}">
</div>
<div>
<img u="image" id="galleryImage3" src="{{ITEMIMAGEURL3}}">
<img u="thumb" id="thumbnail3" src="{{THUMB(ITEMIMAGEURL3)}}">
</div>
<div>
<img u="image" id="galleryImage4" src="{{ITEMIMAGEURL4}}">
<img u="thumb" id="thumbnail4" src="{{THUMB(ITEMIMAGEURL4)}}">
</div>
<div>
<img u="image" id="galleryImage5" src="{{ITEMIMAGEURL5}}">
<img u="thumb" id="thumbnail5" src="{{THUMB(ITEMIMAGEURL5)}}">
</div>
<div>
<img u="image" id="galleryImage6" src="{{ITEMIMAGEURL6}}">
<img u="thumb" id="thumbnail6" src="{{THUMB(ITEMIMAGEURL6)}}">
</div>
<div>
<img u="image" id="galleryImage7" src="{{ITEMIMAGEURL7}}">
<img u="thumb" id="thumbnail7" src="{{THUMB(ITEMIMAGEURL7)}}">
</div>
<div>
<img u="image" id="galleryImage8" src="{{ITEMIMAGEURL8}}">
<img u="thumb" id="thumbnail8" src="{{THUMB(ITEMIMAGEURL8)}}">
</div>
<div>
<img u="image" id="galleryImage9" src="{{ITEMIMAGEURL9}}">
<img u="thumb" id="thumbnail9" src="{{THUMB(ITEMIMAGEURL9)}}">
</div>
<div>
<img u="image" id="galleryImage10" src="{{ITEMIMAGEURL10}}">
<img u="thumb" id="thumbnail10" src="{{THUMB(ITEMIMAGEURL10)}}">
</div>
</div>
and a listing has only 4 sets of pictures/first 4 sets image paths. How do I delete the div tags that wrap around the images from 5-10?
Thank you in advance!!
Try ...
<img src="{{THUMB(ITEMIMAGEURL1)}}" id="img1">
<img src="{{THUMB(ITEMIMAGEURL2)}}" id="img2">
<img src="{{THUMB(ITEMIMAGEURL3)}}" id="img3">
<img src="{{THUMB(ITEMIMAGEURL4)}}" id="img4">
<img src="{{THUMB(ITEMIMAGEURL5)}}" id="img5">
<img src="{{THUMB(ITEMIMAGEURL6)}}" id="img6">
<img src="{{THUMB(ITEMIMAGEURL7)}}" id="img7">
<img src="{{THUMB(ITEMIMAGEURL8)}}" id="img8">
<img src="{{THUMB(ITEMIMAGEURL9)}}" id="img9">
<img src="{{THUMB(ITEMIMAGEURL10)}}" id="img10">
function removeImages(site_has) {
for (var i=site_has+1; i<=10; i++) {
document.getElementById('img'+i).style.visibility='hidden';
}
}
... to remove ...
var image_x = document.getElementById('img'+i);
image_x.parentNode.removeChild(image_x);
I am creating a product page in a checkout. The page has swatches that when clicked need to update the main image and corresponding thumbnails with a new set of images with the new color. You can view page here: http://www.briansugden.com/ai/tron.html un/pw is ai/ai.
Here's the code I have:
<div id="productGallery">
<div id="tronGallery_1" class="tab">
<div class="productGalleryMainImg">
<img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>
<div id="productThumbs">
<img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" />
<img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" />
<img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
<img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
</div>
</div>
<div id="tronGallery_2" class="tab">
<div class="productGalleryMainImg">
<img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>
<div id="productThumbs">
<img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" />
<img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" />
<img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
<img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
</div>
</div>
<div id="tronGallery_3" class="tab">
<div class="productGalleryMainImg">
<img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>
<div id="productThumbs">
<img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" />
<img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" />
<img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
<img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
</div>
</div>
<div id="tronGallery_4" class="tab">
<div class="productGalleryMainImg">
<img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>
<div id="productThumbs">
<img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" />
<img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" />
<img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
<img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" />
</div>
</div>
</div>
And the javascript for the main thumbs (change views of main image) as well as the swatches (change whole gallery to a new color):
$(function(evt) {
$("a:has(img.thumb)").click(function() {
var largePath = $(this).attr("href");
$("#photoLarge").attr({ src: largePath });
return false;
});
$("#productThumbs > a > img").click(function(e){
e.preventDefault();
$("#productThumbs > a > img").addClass("active").not(this).removeClass("active");
});
});
$(document).ready(function () {
$("#tronGallery_2").hide();
$("#tronGallery_3").hide();
$("#tronGallery_4").hide();
var clickHandler = function (link) {
$(".tab").hide();
$("#tronGallery_" + link.data.id).show();
$(".active").removeClass("active");
$(this).attr("class","active");
}
$(".swatch1").bind("click", {id:"1"} ,clickHandler);
$(".swatch2").bind("click", {id:"2"} ,clickHandler);
$(".swatch3").bind("click", {id:"3"} ,clickHandler);
$(".swatch4").bind("click", {id:"4"} ,clickHandler);
})
</script>
So the divs arent switching out correctly and the thumbs dont work once you chagne the swatch. I think I know what the problem is but I dont know how to fix it. I assume that once I switch out the divs by clicking a swatch its still targeting the div that was hidden instead of the one that's visible. How do I fix that.
Any help would be much appreciated!
First: those are some expensive shoes!
Second: you have lots of duplicate ID values. For example: photoLarge, productThumbs, thumb01, thumb02, thumb03, thumb04. Make those each unique and you will probably get better results.
Third: after the line $(this).attr("class","active"); you want to have another line to make the first thumbnail active because you removed its active class already. Your HTML marks the first thumbnail active, but that gets removed before it is shown.