I am using jCarouselLite on this page
Here is the code
//jcarousel 1.0.1
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:7,start:0,scroll:2,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')};function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);
jQuery(document).ready(function($) {
$(".slider").jCarouselLite({
btnNext: null,
btnPrev: null,
visible: 7,
scroll: 2,
vertical: false,
circular: true,
itemFallbackDimension: 150,
start: 0,
auto: 4000,
speed: 1000
});
});
On that way it's working some times with showing 7 images and sometimes it's showing only 5 images and sometimes no images and stopped working.
Please help me to fix it.
Thanks
can you post your html, please?
normally you can slide with the jcarousel just by preparing the html on the right way
like this:
<div class="jcarousel-container jcarousel-container-horizontal" id="pictureslide">
<div class="jcarousel-clip jcarousel-clip-horizontal" id="pic" style='position: relative;'>
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal' id='jcarousel-item-1'>
<img src="pic/slide1.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-2-horizontal' id="jcarousel-item-2" >
<img src="pic/slide2.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-3-horizontal' id="jcarousel-item-3" >
<img src="pic/slide3.jpg" alt="slide" />
</li>
</ul> </div>
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display:'block'">
<a class="controls prev" href="#"><img id="arrow-left" src="pic/arrow_left.png" alt="arrow-left" /></a>
</div>
<div class="jcarousel-next jcarousel-next-horizontal" style="display:'block'">
<a class="controls next" href="#"><img id="arrow-right" src="pic/arrow_right.png" alt="arrow-right"/></a>
</div>
</div>
<!-- END #pictureslide -->
in Javascript you only have to write this (the id is at the ul):
$('#mycarousel').jcarousel({
"wrap": 'circular',
"scroll": 2
....
});
Related
JavaScript
const projectsSwiper = new Swiper(".projects__swiper-start", {
speed: 1000,
slidesPerView: 3,
navigation: {
nextEl: ".projects__swiper-next",
prevEl: ".projects__swiper-prev",
},
watchOverFlow: true,
simulateTouch: true,
spaceBetween: 19,
scrollbar: {
el: ".projects__swiper-scroll",
draggable: true,
dragSize: 80,
},
});
HTML
<div class="projects__swiper-start swiper">
<div class="projects__swiper swiper-wrapper">
<div class="projects__swiper-slide swiper-slide">
<div class="projects__swiper-img">
<img src="images/projects/slide-1.jpg" alt="slide-1" />
</div>
</div>
<div class="projects__swiper-slide swiper-slide">
<div class="projects__swiper-img">
<img src="images/projects/slide-2.jpg" alt="slide-2" />
</div>
</div>
<div class="projects__swiper-slide swiper-slide">
<div class="projects__swiper-img">
<img src="images/projects/slide-3.jpg" alt="slide-3" />
</div>
</div>
<div class="projects__swiper-slide swiper-slide">
<div class="projects__swiper-img">
<img src="images/projects/slide-4.jpg" alt="slide-4" />
</div>
</div>
</div>
</div>
Now I have scrolled in full width, but I need to reduce it to 300px and place it in the center, as I found the slider to reduce, but with the width of the scroll, there is a problem.
Thank you very much in advance!
dragSize - Size of scrollbar draggable element in px.
No API option to control the width of swiper-scrollbar (The wrapper). If you change this by custom CSS you destroy the way the scrollbar works.
/* will not work as it should */
.swiper-horizontal .swiper-scrollbar{
width: 50%!important;
}
You should open Github Feature Req related to this idea:
https://github.com/nolimits4web/swiper/issues
I got a Thumbnail slider but that does not work right, When i click a particular thumb image, the main images is repeated is the same image appears.
Anyone can help me to solve this
Relevant URL: http://jsfiddle.net/danoftheman/C3Sr3/1/
$(document).ready(function() {
$(function() {
// If there are gallery thumbs on the page
if ($('#gallery-thumbs').length > 0) {
// Cache the thumb selector for speed
var thumb = $('#gallery-thumbs').find('.thumb');
// How many thumbs do you want to show & scroll by
var visibleThumbs = 4;
// Put slider into variable to use public functions
var gallerySlider = $('#gallery').bxSlider({
controls: false,
pager: false,
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500,
onAfterSlide: function(currentSlideNumber) {
thumb.removeClass('pager-active');
thumb.eq(currentSlideNumber).addClass('pager-active');
},
onNextSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
},
onPrevSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
}
});
// When clicking a thumb
thumb.click(function(e) {
// -6 as BX slider clones a bunch of elements
gallerySlider.goToSlide($(this).closest('.thumb-item').index() - 6);
// Prevent default click behaviour
e.preventDefault();
});
// Function to calculate which slide to move the thumbs to
function slideThumbs(currentSlideNumber, visibleThumbs) {
// Calculate the first number and ignore the remainder
var m = Math.floor(currentSlideNumber / visibleThumbs);
// Multiply by the number of visible slides to calculate the exact slide we need to move to
var slideTo = m * visibleThumbs;
// Tell the slider to move
thumbsSlider.goToSlide(slideTo);
}
// When you click on a thumb
$('#gallery-thumbs').find('.thumb').click(function() {
// Remove the active class from all thumbs
$('#gallery-thumbs').find('.thumb').removeClass('pager-active');
// Add the active class to the clicked thumb
$(this).addClass('pager-active');
});
// Thumbnail slider
var thumbsSlider = $('#gallery-thumbs').gbxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
displaySlideQty: visibleThumbs,
moveSlideQty: visibleThumbs,
infiniteLoop: false,
slideWidth: 200,
minSlides: 4,
maxSlides: 4,
slideMargin: 10
});
}
});
});
.gallery-container {
width: 350px;
height: 300px;
}
.gallery-thumbs-container {
width: 350px;
height: 300px;
}
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/jquery.bxslider.css" rel="stylesheet" />
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/gallery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/gallery.bxslider.js" type="text/javascript"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/jquery.bxslider.js" type="text/javascript"></script>
<div class="gallery-container">
<div id="gallery" class="gallery-images">
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-silver-blue.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-cherry-red.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-ivory.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-white.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-brown.jpg" alt="" />
</div>
<div class="gallery-thumbs-container">
<ul id="gallery-thumbs" class="gallery-thumbs-list">
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-silver-blue.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-cherry-red.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-ivory.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
</ul>
</div>
</div>
Update this line
gallerySlider.goToSlide($(this).closest('.thumb-item').index() -6);
to
gallerySlider.goToSlide($(this).closest('.thumb-item').index() );
http://jsfiddle.net/C3Sr3/23/
I'm trying to make a mixed content type lightbox gallery using magnific popup like this.
here is my code
$(".mixed-type").on("click", function() {
var data_type = $(this).attr("data-type");
$(".mixed-type").magnificPopup({
disableOn: 700,
type: data_type,
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,
fixedContentPos: true,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr("data-class")
}
}
});
});
<div class="book-inner">
<img src="img/thumb/pic1.jpg" alt="">
<div class="book-hover">
<ul class="preview-link blue">
<li>
<a title="First image title" href="img/pic1.jpg" class="mixed-type" data-effect="mfp-zoom-in" data-type="image">+</a>
</li>
</ul>
</div>
</div>
<div class="book-inner">
<img src="img/thumb/pic2.jpg" alt="">
<div class="book-hover">
<ul class="preview-link blue">
<li>
<a title="Second image title" href="//w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/79509752&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" class="popup-iframe audio" data-effect="mfp-zoom-in" data-class="audio" data-type="irfame"><i class="fa fa-headphones"></i></a>
</li>
</ul>
</div>
</div>
but it's not working :(
is there any suggestion.
Thanks.
You missed document.ready function in above code snippet. wrap your code inside
$(document).ready(
function() {
//put your code here
});
and use this href="" data-mfp-src="img/pic1.jpg" in your anchor tag
I wrote a simple function that takes content from one div and put it to the other when specified element is clicked. I did it for the image caption in my slider. So, when you click arrow which is an anchor, then content from div 'orbit-caption' assigned to the 'active' slide is put to the other one 'image-caption'.
<ul class="projects-slider" data-orbit>
<li>
<img src="img/projects/1.jpg" alt="slide 1" />
<div class="orbit-caption">
Text 1
</div>
</li>
<li>
<img src="img/projects/2.jpg" alt="slide 2" />
<div class="orbit-caption">
Text 2
</div>
</li>
<li>
<img src="img/projects/3.jpg" alt="slide 3" />
<div class="orbit-caption">
Text 3
</div>
</li>
<li>
<img src="img/projects/4.jpg" alt="slide 4" />
<div class="orbit-caption">
Text 4
</div>
</li>
<li>
<img src="img/projects/5.jpg" alt="slide 5" />
<div class="orbit-caption">
Text 5
</div>
</li>
</ul>
<span></span>
<span></span>
<footer><div class="img-caption"></div></footer>
<script>
$(document).ready(function() {
var caption = $('li.active .orbit-caption').html();
$('.img-caption').text(caption);
$('.orbit-container a').click(function() {
var caption = $('li.active .orbit-caption').html();
$('.img-caption').text(caption);
});
});
</script>
The problem is that click is delayed, I mean that when I click once, my image got description of previous one. Could someone help me with this problem and show how to simplify my function?
Is it what you want ?
http://jsfiddle.net/OxyDesign/5o3aa225/
JS
$(document).ready(function() {
$('.img-caption').text($('li.active .orbit-caption').html());
$('.orbit-next,.orbit-prev').click(function() {
var currentLi = $('li.active'),
newLi = $(this).hasClass('orbit-next') ? currentLi.next() : currentLi.prev();
if(newLi.length){
currentLi.removeClass('active');
newLi.addClass('active');
$('.img-caption').text(newLi.find('.orbit-caption').html());
}
});
});
You also can use the settings of the orbit slider (Orbit Doc) and add your function as a callback (after_slide_change) :
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: false,
animation_speed: 500,
navigation_arrows: true,
timer: false,
bullets: false,
slide_number: false,
slide_number_text: 'of',
swipe: true,
variable_height: 'auto',
after_slide_change : function(){
$('.img-caption').text($('li.active').find('.orbit-caption').html());
}
}
});
Or you can use the event after-slide-change.fndtn.orbit (Orbit Doc)
$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) {
$('.img-caption').text($('li.active').find('.orbit-caption').html());
});
Or
$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) {
$('.img-caption').text($('.orbit-caption').eq(orbit.slide_number).html());
});
I have a problem with my code, i word at a new website where i want make the thing more attractive. My code is:
<div class="portfolioFilter">
<ul class="portfolio-isotope-filter clearfix">
<li class="selected"><span>All</span></li>
<li><span>Concerte</span></li>
<li><span>Spectacole</span></li>
<li><span>Prezentari</span></li>
</ul>
</div>
<div id="imagini-artists">
<div class="portfolioContainer cf">
<div class="objects">
<img src="img/artists/1.png" alt="image">
</div>
<div class="people places">
<img src="img/artists/2.png" alt="image">
</div>
<div class="food">
<img src="img/artists/3.png" alt="image">
</div>
<div class="people places">
<img src="img/artists/4.png" alt="image">
</div>
<div class="places objects">
<img src="img/artists/5.png" alt="image">
</div>
<div class="people food objects">
<img src="img/artists/6.png" alt="image">
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
$(window).load(function(){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
The problem is: i can`t find where i can set the Height of 'portfolioContainer' in the chrome show me a value but is from html tag style=".." . And the second problem is with the number of images, i want to put 3 images, so maybe need to change the width for that.
http://jsfiddle.net/wC4tw/
I want some help,
Thanking you in advance