thanks for reading, I try to use swiper.js and it works fine with the lazy loading demo, but in the demo, there is only one image per slide, but I want to represent 4 imgs per slide, which turns out only the first img in each slide will show up.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Required swiper-lazy class and image source specified in data-src attribute -->
<img data-src="1.jpg" class="swiper-lazy">
<img data-src="2.jpg" class="swiper-lazy">
<img data-src="3.jpg" class="swiper-lazy">
<img data-src="4.jpg" class="swiper-lazy">
<img data-src="5.jpg" class="swiper-lazy">
<!-- Preloader image -->
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="3.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<img data-src="4.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
</div>
</div>
so, I am trying to read the jquery code in swiper.js, and due to my ability, I can not figure it out, tbh, I can not understand.
any help?
I got it.
As long as I am using the same src with the ones in the slides after, it was lazy loaded too. After replacing all the data-srcs with diff ones, it works.
Thank, swiper.js
Related
I try to create Swiper.js card with one slide which transform: translate3d on image, unfortunately Swiper duplicate my image and card clipping across when flipping
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="fg">
<img src="assets/img/lelay.png" alt="" />
<img src="assets/img/lelay-title.png" alt="" />
</div>
<div class="bg">
<img src="assets/img/shape.png" alt="" />
</div>
</div>
</div>
Here's Fiddle!
https://jsfiddle.net/arz4t8k9/10/
thanks
I think the problem is in the backface of the bg and fg elements.
You can try to give them backface-visibility:hidden so the backface doesn't show, like that:
fg, .bg{
backface-visibility: hidden;
}
and now there is nothing in the background, but the slide shows just one size until you reach the another side, it will be visible.
If it's not what you want, explain me your goal and I will try to help more.
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
I found this sample and it looks good, so I put a thumbnail from bootstrap.
http://www.bootply.com/129165
And I like to implement it to the site my developing.
http://hotmeltcoatingmachines.com/
what I want is to flip the thumbnail thru button click.
How can I do that.
Thanks
<div class="flip">
<div class="card">
<div class="face front">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>front</h3>
<p>...</p>
<p>Flip Button</p>
</div>
</div>
</div>
<div class="face back">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>back</h3>
<p>...</p>
<p>Button flip</p>
</div>
</div>
</div>
</div>
</div>
</div>
sample code
http://www.bootply.com/pZXSuyPPWx
The answer by #menaka will flip all the icons. If you want to flip only the icon that was clicked then use something like below:
$('.fliper-btn').click(function(e){
$(e.target).closest('.flip').find('.card').toggleClass('flipped');
});
Make sure you keep the custom class fliper-btn as suggested by #menaka.
Flip
change JQuery code like this
$('.fliper-btn').click(function(){
$('.flip').find('.card').toggleClass('flipped');
});
and give flip action buttons a custom class name like 'fliper-btn' and add it like this
Flip
I am simply testing the Masonry.js jQuery plugin/effect on my site, got barely anything on the site apart from the basics, even copied everything from a demo site and it still didn't work. Can't understand why.
It appears as the Masonry jQuery plugin is just not taking any effect or loading, but the page loads the file correctly and the code to call it to action is the Exact same as that on a demo site which it works fine on. As a test I've even got my stylesheet connecting directly from this example site, and all id's and class names are the same.
Live: http://bit.ly/1k7RgDS
Example Site (working fine for this site): http://bit.ly/1kcCmJA
Masonry jQuery Site: http://masonry.desandro.com/
HTML
<div id="container">
<div class="masonryImage">
<img src="http://lorempixum.com/200/200/food/1" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/150/food/10" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/250/food/3" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/200/food/1" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/150/food/10" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/250/food/3" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/200/food/1" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/150/food/10" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/250/food/3" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/200/food/1" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/150/food/10" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/250/food/3" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/200/food/1" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/150/food/10" alt="">
</div>
<div class="masonryImage">
<img src="http://lorempixum.com/200/250/food/3" alt="">
</div>
</div>
jQuery
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="<?php HTTP_HOST ?>/Scripts/masonry.pkgd.min.js"></script>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.masonryImage'
});
});
});
</script>
The example site is using a different version of the jQuery masonry plugin.
If you use the syntax provided on the masonry.js website it will work.
The correct syntax:
var $container = $('#container');
// initialize
$container.masonry({
itemSelector: '.masonryImage'
});
going to the page and opening firebug i see:
$container.imagesLoaded is not a function
imagesLoaded is not something native to jquery.. you probably need to add this jquery extension to your page
I'm guessing that you're using the latest version of Masonry. The site you referenced uses an older version of Masonry (v2), coming into version 3, Desandro removed imagesLoaded, so if you want to use imagesLoaded, you'll have to include the JS file from Desandro's page:
http://imagesloaded.desandro.com/
In which case your original code will work, however a better way to do it would be
var $container = $('#container');
$container.masonry({
itemSelector: '.masonryImage'
});
$container.imagesLoaded(function () {
$container.masonry();
});
This is probably overkill unless you plan on dynamically loading in new images / don't know the dimensions of your images as Masonry needs those to perform properly. If that's the case, I'd go with including it.
I’m searching for a way to display the next and previous slideshow image within the Twitter Bootstrap Carousel.
As per default it just show the current image and if I remove the display:none css property it has every item in the carousel below each other. I’ve tried to play with the CSS but haven’t got it to work.
The idea is to display the current slideshow image in the middle and then the next and previous image with opacity, not necessarily clickable.
I’ve tried different slideshows and carousels but can’t seem to find anyone which satisfies these requirements and some of those who come close will not adapt to the responsive design that Bootstrap provides.
Normally when I’m using the carousel with multiple items, I just group e.g. images within the <div class="item"> div like:
<div class="item active">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
But this will not do what I want because it rotates all three items at the time and not take one image each.
Any suggestion, advice, or link for some walk-through or tutorial will be very much appreciated.
Cheers
This is the link that helped me
Twitter Bootstrap 101: The Carousel