I'm trying to set the start position in a fullscreen MaterializeCSS carousel. I want to use it as a gallery image viewer inside a fullscreen modal.
Once gallery image is clicked, the modal opens and the image slider should start at the clicked image. Inside the documentation of MaterializeCSS I couldn't find any important information for that.
Currently the carousel slides to the right image. I only want to delete the slide effect on start and activate it after viewing the first image.
Two of many images to open:
<div class="gallery-item-left col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-1" data-position="1" src="...path-to-image-1..." />
</div>
<div class="gallery-item-right col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-2" data-position="2" src="...path-to-image-2..." />
</div>
...
My jQuery code
jQuery(document).ready(function($) {
$('body').on('click', '.gallery-item', function() {
var position = $(this).data('position');
$('#img-viewer-modal').modal('open');
$('#img-viewer-carousel').carousel({fullWidth: true, duration: 400});
$('#img-viewer-carousel').carousel('set', [position - 1]);
});
#img-viewer-carousel is simply the carousel id inside my modal.
I'm very thankful for every tip.
The only workaround I've found is to dynamicly change the content items of the carousel.
See example under https://www.codeply.com/go/EiubFqcKcg
Related
Im using a combination of softwares to achieve a slideshow/lightbox/zoom and pan effect and have reached a barrier with the Panzoom module.
My code works like this, the server pre-loads the images that will go into the slideshow and on loading the page, the images are loaded into the carousel (Swiper). Then on clicking an image, the image is opened in a lightbox (GLightbox) and since the zoom function offered with that isnt accurate enough, I wanted to plugin a third software to allow scroll wheel zooming and panning.
HTML:
<div class="swiper mySwiper" id="mySwiper">
<div class="swiper-wrapper" id="load">
<% for(let img of images) { %>
<div class="swiper-slide d-flex align-items-stretch align-items-center justify-content-center"><img class="glightbox img-fluid" src='<%=img%>'style="height:100%;width:auto" data-zoomable="false" data-draggable="false"></div>
<% } %>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
here is how Ive implemented the click event for applying the panzoom zoomWithWheel function:
$(document).ready(
()=>{
$('.glightbox').click(
()=>{
const elmt=$('.gslide-media img')[0];
console.log(elmt);
const panzoom=Panzoom(elmt);
$(elmt).on('wheel', panzoom.zoomWithWheel)
}
)
})
Pan seems to work fine but my problem now is the scrolling only zooms OUT the image in the lightbox. Help Please!
I am working on a website in which I want to hide next and previous buttons when there is only one image on the carousel and show next and previous buttons when there are multiple images.
The php code which I have used which I have used in order to rendered multiple images at the front end are:
<div class="col-9 text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->gallery))
{
foreach ($data['item']->gallery as $gallery)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$gallery->url.'">
</div>
</div>';
//'.$gallery->url.';
}
}
?>
</div>
</div>
Problem Statement:
I am wondering what carousel code I need to add so that next and previous buttons show up when there are multiple images, and no next and previous buttons show up when there is single image.
What I have tried:
<script>$('#owl_item_images').owlCarousel({nav : false});</script> By using that, all images get visible (with images lining up side by side) inside the carousel.
I also tried with the following code:
$('#owl_item_images').trigger('change.owl.carousel', { nav: true }); but it didn't work as well.
Not tried it but this should do the trick:
if(size($data['item']->gallery)<=1)
{
echo "<script>
$(function(){
$('#owl_item_images').owlCarousel({nav : false});
});
</script>";
}
put this after foreach loop
If I am not missing something, what you asked for is pretty much out of the box.
if you set nav:true owl.carousel itself will show navigation if there is more than one item, and no navigation if there is only one item, as seen in that pen:
https://codepen.io/optionsit/pen/BPGzvV
what version of owl.carousel are you using? and do you have anymore markup in your carousel?
You can count the number of images in the carousel using jQuery. Then, only show the nav if there is more than one image.
Try this:
<script>
var imageCount = $('#owl_item_images .item_images_carousel').length;
var showNav = false;
if (imageCount > 1) showNav = true;
$('#owl_item_images').owlCarousel({nav : showNav});
</script>
I bought a html template in themeforest and customized. It has a slider with 3 images. I want to stop the slider after completing 1 loop.
<div id="slider" data-auto="true">
<div id="slide1"><img></div>
<div id="slide2"><img></div>
<div id="slide3"><img></div>
</div>
Now I want to change parent div's attribute to false when slide3 div loads. I'm trying this now.
<script>
$(document).ready(function(){
$("#slide3").load(function(){
$("slider").attr("data-auto", false);
});
});
</script>
I believe data-auto tag simply starts the slider automatically. try searching options like loop: into the js init script to disable slider looping
I am using a carousel jquery plugin that doesn't have a built in thumbnail nav, so I am trying to build a poor-man's version.
I'm using the Owl Carousel plugin.
So what I need, for this instance, to happen is that if a slide div in the main carousel has a class .active, then I need to have a div in the second carousel, which has the same index, to get a class active.
Main carousel code:
<div id="slide1">
<div class="owl-wrapper-outer">
<div class="owl-wrapper">
<div class="owl-item"></div>
<div class="owl-item active"></div>
<div class="owl-item"></div>
</div>
</div>
</div>
Then here is the carousel which I am using as a nav:
<div id="slide2">
<div class="owl-wrapper-outer">
<div class="owl-wrapper">
<div class="owl-item"></div>
<div class="owl-item"></div> <!-- this should automatically get .active added -->
<div class="owl-item"></div>
</div>
</div>
</div>
I am not sure how to get the index of both elements, then add class active to #slide2 so that they match.
Ok, here is an update, thanks to the code provided by Michael Schmuki. I added this code to a function that is already being used when the slide moves.. and it works.. however, in my slideshow for #slide1, it shows two slides at once. The good thing is is that both of these slides have the active class added automatically, but when I added in this code, only one of the thumbnails in #slide2 get the active class. Is there a reason it isn't picking up both active slides?
Here's the part of the function I'm using:
function animateIn(carousel){
var carousel = $('#slide1');
var nthChildActive = $(this).find(".active").index() + 1;
$('#slide2 .owl-item .slide.active').removeClass('active');
$("#slide2 .owl-wrapper .owl-item:nth-child("+nthChildActive+")").addClass("active");
}
And here is where it is set up in Owl Carousel
carousel.owlCarousel({
items: 2,
pagination:false,
stopOnHover:true,
afterMove: function() {
animateIn();
}
});
You can detect and mark the (multiple) active elements like this:
//detect & mark
$("#slide1 .owl-item").each(function(index) {
if($(this).hasClass("active"))
$("#slide2 .owl-item:nth-child("+(index+1)+")").addClass("active");
});
You can play with the new example on http://jsbin.com/oHOyEZi/7/edit?js,output
But I'm not familiar with Owl Carousel, so you have to figure out by yourself how to specify, that this logic will be fired when the carousel actually slides.
I am using JS based Drag Slider DragDealer. The slider div is placed in a content slider that runs using jQuery. The Drag Slider works as long as its parent div is not animated to move to left by 200px.
Fiddle: http://jsfiddle.net/gentrobot/9b5Xg/3/
HTML:
<div style="position:relative;width:400px;height:100px;overflow:hidden;">
<div id="1" style="width:200px;float:left;position:absolute;left:0px;">
Test
</div>
<div id="2" style="width:200px;float:left;position:absolute;left:200px;">
<!-- Drag Slider div starts -->
<div id="my-slider" class="dragdealer">
<div class="red-bar handle">drag me</div>
</div>
<!-- Drag Slider div ends -->
</div>
</div>
Click to slide
jQuery(other than JS for Dragdealer):
$('#clk').click(function(){
$('#1').animate({left:'-200px'});
$('#2').animate({left:'0px'});
});
It works if you drag it to the right long enough, where it used to be before.
What you can have though is specifying a callback parameter that reinitializes the thing.
$('#2').animate({left:'0px'}, function(){
new Dragdealer('my-slider');
});
Normally you should append the element back again to avoid having the same listeners more than once. This is influenced by the way the plugin was written but you can do it like this just to be on the same side.
$('#2').animate({left:'0px'}, function(){
var t = $(this);
var random_placeholder = $('<div></div>').insertBefore(t);
$(this).insertAfter(random_placeholder);
random_placeholder.remove();
new Dragdealer('my-slider');
});