Full screen images in loop with chocolat js - javascript

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>

Related

Target all link by parent class, add "rel" attribute to link (without jQuery)

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>

Uncaught TypeError: this.groupItems() is undefined

I am using Responsive Mobile-first Image Viewer - jQuery SmartPhoto plugin on my website. I notice that If I use jquery-2.2.4.min.js then it's working and if I use the latest jQuery jquery 3.5.1 then it's not working.
Sometimes I am getting an error on my console.
Uncaught TypeError: this.groupItems() is undefined
Old Jquery 3.5.1 not working
$(function() {
$(".js-img-viwer").smartPhoto();
});
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/css/smartphoto.min.css">
<div class="masonry">
<div class="brick">
<a href="https://unsplash.it/867/1997?image=510" class="js-img-viwer" data-caption="Jeff Sheldon" data-id="raion">
<img src="https://unsplash.it/360/829?image=510" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1140?image=494" class="js-img-viwer" data-caption="Matthew Wiebe" data-id="rakuda">
<img src="https://unsplash.it/360/239?image=494" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1282/1929?image=482" class="js-img-viwer" data-caption="Danny Froese" data-id="kaba">
<img src="https://unsplash.it/360/541?image=482" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1141?image=454" class="js-img-viwer" data-caption="Mia Domenico" data-id="koara">
<img src="https://unsplash.it/360/239?image=454" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1141?image=449" class="js-img-viwer" data-caption="Maciej Serafinowicz" data-id="kuma">
<img src="https://unsplash.it/360/239?image=449" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1140?image=445" class="js-img-viwer" data-caption="Aleksi Tappura" data-id="sai">
<img src="https://unsplash.it/360/239?image=445" width="360" />
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/js/jquery-smartphoto.min.js?v=1"></script>
Old Jquery 2.2.4 working
$(function() {
$(".js-img-viwer").smartPhoto();
});
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/css/smartphoto.min.css">
<div class="masonry">
<div class="brick">
<a href="https://unsplash.it/867/1997?image=510" class="js-img-viwer" data-caption="Jeff Sheldon" data-id="raion">
<img src="https://unsplash.it/360/829?image=510" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1140?image=494" class="js-img-viwer" data-caption="Matthew Wiebe" data-id="rakuda">
<img src="https://unsplash.it/360/239?image=494" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1282/1929?image=482" class="js-img-viwer" data-caption="Danny Froese" data-id="kaba">
<img src="https://unsplash.it/360/541?image=482" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1141?image=454" class="js-img-viwer" data-caption="Mia Domenico" data-id="koara">
<img src="https://unsplash.it/360/239?image=454" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1141?image=449" class="js-img-viwer" data-caption="Maciej Serafinowicz" data-id="kuma">
<img src="https://unsplash.it/360/239?image=449" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1140?image=445" class="js-img-viwer" data-caption="Aleksi Tappura" data-id="sai">
<img src="https://unsplash.it/360/239?image=445" width="360" />
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/js/jquery-smartphoto.min.js?v=1"></script>
Not sure why this would change with newer jQuery-Version but since you want something done with your images:
Have you tried using jquery's window.onload instead of only $()-prefix?
$() is short for $(document).ready() which runs once DOM is ready, whereas $( window ).on( "load", function() { ... }) runs once things like images are also ready:
https://learn.jquery.com/using-jquery-core/document-ready/

Fancybox index reset when opened from hidden div

I have a project with thumbnails that when moused over show the full-sized version in a display area div. This is done using jQuery to pull the HTML for the full-sized images from a hidden div and display it in the visible display div.
I currently have Fancybox (ver 2.1.5) configured to work on document load. Each of the hidden full-sized images includes a link that has the fancybox class and a rel group with the same name.
When the display area is clicked on, Fancybox opens the image as desired. However, when the next button is clicked it always goes to the first image (including when it is the first image), and the previous button always goes to the last image (including when it is the last image). Of course my desise would be for it to maintain the order of the images (as the links are ordered in the HTML).
Does anyone have any suggestions how this might work as I am hoping (either with jQuery or Fancybox)?
My thanks in advance to all you brilliant folks out there who generously volunteer your time and expertise!
HTML:
<div class="report_container">
<div class="report_thumbnails_container">
<div class="report_thumbnails">
<img src="images/contents/page1_thumbnail.jpg"/>
<img src="images/contents/page2_thumbnail.jpg"/>
<img src="images/contents/page3_thumbnail.jpg"/>
<img src="images/contents/page4_thumbnail.jpg"/>
<img src="images/contents/page5_thumbnail.jpg"/>
<!--a href"#" page="page6"><img src="images/contents/page6_thumbnail.jpg"/></a-->
<img src="images/contents/page7_thumbnail.jpg"/>
<img src="images/contents/page8_thumbnail.jpg"/>
<img src="images/contents/page9_thumbnail.jpg"/>
<img src="images/contents/page10_thumbnail.jpg"/>
<img src="images/contents/page11_thumbnail.jpg"/>
<img src="images/contents/page12_thumbnail.jpg"/>
<!--a href="#" page="page13"><img src="images/contents/page13_thumbnail.jpg"/></a-->
<img src="images/contents/page14_thumbnail.jpg"/>
<img src="images/contents/page15_thumbnail.jpg"/>
<img src="images/contents/page16_thumbnail.jpg"/>
<img src="images/contents/page17_thumbnail.jpg"/>
</div>
</div>
<div class="report_page_container">
<div class="page_contents"></div>
</div>
<div class="clear_both"></div>
</div>
<div class="page_container_contents">
<div class="page_contents" id="page1">
<a class="fancybox" rel="group" href="images/contents/page1_preview.jpg"><img src="images/contents/page1_display.jpg" width="900" height="1150" /></a>
</div>
<div class="page_contents" id="page2">
<a class="fancybox" rel="group" href="images/contents/page2_preview.jpg"><img src="images/contents/page2_display.jpg" width="900" height="1098" /></a>
</div>
<div class="page_contents" id="page3">
<a class="fancybox" rel="group" href="images/contents/page3_preview.jpg"><img src="images/contents/page3_display.jpg" width="900" height="1207" /></a>
</div>
<div class="page_contents" id="page4">
<a class="fancybox" rel="group" href="images/contents/page4_preview.jpg"><img src="images/contents/page4_display.jpg" width="900" height="1091"/></a>
</div>
<div class="page_contents" id="page5">
<a class="fancybox" rel="group" href="images/contents/page5_preview.jpg"><img src="images/contents/page5_display.jpg" width="900" height="1102"/></a>
</div>
<!--div class="page_contents" id="page6">
<a class="fancybox" rel="group" href="images/contents/page6_preview.jpg"><img src="images/contents/page6_display.jpg" width="900" height=""/></a>
</div-->
<div class="page_contents" id="page7">
<a class="fancybox" rel="group" href="images/contents/page7_preview.jpg"><img src="images/contents/page7_display.jpg" width="900" height="1154"/></a>
</div>
<div class="page_contents" id="page8">
<a class="fancybox" rel="group" href="images/contents/page8_preview.jpg"><img src="images/contents/page8_display.jpg" width="900" height="1145"/></a>
</div>
<div class="page_contents" id="page9">
<a class="fancybox" rel="group" href="images/contents/page9_preview.jpg"><img src="images/contents/page9_display.jpg" width="900" height="1159"/></a>
</div>
<div class="page_contents" id="page10">
<a class="fancybox" rel="group" href="images/contents/page10_preview.jpg"><img src="images/contents/page10_display.jpg" width="900" height="1141"/></a>
</div>
<div class="page_contents" id="page11">
<a class="fancybox" rel="group" href="images/contents/page11_preview.jpg"><img src="images/contents/page11_display.jpg" width="900" height="1138"/></a>
</div>
<div class="page_contents" id="page12">
<a class="fancybox" rel="group" href="images/contents/page12_preview.jpg"><img src="images/contents/page12_display.jpg" width="900" height="1162"/></a>
</div>
<!--div class="page_contents" id="page13">
<a class="fancybox" rel="group" href="images/contents/page13_preview.jpg"><img src="images/contents/page13_display.jpg" width="900" height=""/></a>
</div-->
<div class="page_contents" id="page14">
<a class="fancybox" rel="group" href="images/contents/page14_preview.jpg"><img src="images/contents/page14_display.jpg" width="900" height="1110"/></a>
</div>
<div class="page_contents" id="page15">
<a class="fancybox" rel="group" href="images/contents/page15_preview.jpg"><img src="images/contents/page15_display.jpg" width="900" height="1101"/></a>
</div>
<div class="page_contents" id="page16">
<a class="fancybox" rel="group" href="images/contents/page16_preview.jpg"><img src="images/contents/page16_display.jpg" width="900" height="1152"/></a>
</div>
<div class="page_contents" id="page17">
<a class="fancybox" rel="group" href="images/contents/page17_preview.jpg"><img src="images/contents/page17_display.jpg" width="900" height="1154"/></a>
</div>
<!--div class="page_contents" id="page18">
<a class="fancybox" rel="group" href="images/contents/page18_preview.jpg"><img src="images/contents/page18_display.jpg" width="900" height=""/></a>
</div-->
</div>
Code:
$(document).ready(function() {
$(".fancybox").fancybox();
var page = '.page_contents#page1';
var htmlCode = $(page).html();
$('.report_page_container .page_contents').html(htmlCode);
var notClicked = true;
$('.report_thumbnails a').mouseover(function(){
if (notClicked) {
var page = '.page_contents#' + $(this).attr('page');
var htmlCode = $(page).html();
$('.report_page_container').fadeOut(0, function(){
$('.report_page_container .page_contents').html(htmlCode);
$('.report_page_container').fadeIn(0);
});
}
});
$('.report_thumbnails a').click(function(e){
// Disables standard link behavior
e.preventDefault();
if (!$(this).hasClass('selected')) {
$('.report_thumbnails a').removeClass('selected');
$('.report_thumbnails a').children().css('opacity', '1');
$(this).addClass('selected');
$(this).children().css('opacity', '.5');
notClicked = false;
} else {
$(this).removeClass('selected');
$('.report_thumbnails a').removeClass('selected');
$('.report_thumbnails a').children().css('opacity', '1');
notClicked = true;
}
var page = '.page_contents#' + $(this).attr('page');
var htmlCode = $(page).html();
$('.report_page_container').fadeOut(0, function(){
$('.report_page_container .page_contents').html(htmlCode);
$('.report_page_container').fadeIn(0);
});
});
});

how to change the image of div on click of other image

I have two image div in HTML i want that onclik of one image other image should change
<div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
<div class="alignment"><img src="pagetwo_graph_one.png"/></div>
<div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
<div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
<div class="option_image"><img src="option1.png"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="option1.png"/></div>
<div class="option_image_label_one">Option 2</div>
I want that on click on option_image_one it should change image of image_one and imagetwo
UPDATE
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById('toChange').src='3.jpg';
}
</script>
</head>
<body>
<div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
<div class="image_two"><img src="2.jpg" id="toChange"/></div>
</body>
</html>
Here the code that works for me
onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "
It would work.
Best option is to give images some id and then do something like document.getElementById('yourId').src='newimage' (this should be some js function that you assign to onClick event on your first div)
You can try the following:
<div class="option_image_one">
<img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
</div>
<div class="image_two">
<img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
</div>
Note that I have added an ID to the second image.
See the live example on this interactive HTML/JS editor
div are useless
<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>
If you could use jQuery it would be like this:
$(".option_image_one img").onclick(function(event) {
$(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});
To use jQuery import the jQuery library by including the following in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
As per Thomas's and Filype's answers, I would suggest that use divs but put onClick for img tag and not div tag.
This is for future enhancement so that if you would like to add anything else to these divs.
complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>

Rotate through numerous galleries with one set of thumbnails

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.

Categories