The pager is built using the "Advanced Custom Template" on a carousel slideshow.
Boths slideshows look ok until I click the pager, then it acts strange: active slide doesn't change position; when clicking an item on the pager, doesn't show correct slide in main slideshow then stops working altogether.
See it here:
http://jsfiddle.net/Shmfv/1/
<div class="boxGaleria cycle-slideshow" data-cycle-slides="> div" data-cycle-fx="scrollHorz" data-cycle-pager-template="<a href='#' ><img src='{{children.0.src}}'><h3>{{children.1.textContent}}</h2><h3>{{children.2.textContent}}</h2></a>" data-cycle-pager=".boxNav">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<div class="boxNav cycle-slideshow" data-cycle-timeout="1500" data-cycle-fx="carousel" data-cycle-carousel-visible="3" data-allow-wrap="true" data-cycle-carousel-fluid="true" data-cycle-slides="> a"></div>
Thoughts?
Finally figured out a workaround... Can't use the plugin's pager option and had to add some scripting.
// fill the pager
$('.boxGaleria > div').clone().appendTo('.boxNav');
// update active slide in both slideshows
var slideshows = $('.cycle-slideshow').on('cycle-update-view',function(event, opts) {
slideshows.not(this).cycle('goto', opts.currSlide);
});
// add click to the carousel/pager, correct slide index because the carousel adds a few duplicate children before and after to display correctly
$('.boxNav div').click(function(){
var index = $('.boxNav').data('cycle.API').getSlideIndex(this);
var todos = $('.boxGaleria').data('cycle.opts').slideCount;
slideshows.cycle('goto', (index-todos));
});
hey Check out this Q&A here
jQuery Cycle2 - Carousel pager navigation
had issues with a similar method to yours.
Related
I am using Justified-Gallery
to layout my gallery thumbnails. I want to implement a preloader so the images only show once they have been formatted by Justified-Gallery.
I saw this option in the plugin but I couldn't get it to work, waitThumbnailsLoad.
Currently I am hiding the div containing the thumbnails, and then showing it once the plugin has completed. Is this the best way or is there a better way to do this?
HTML
<div id="justify-gallery" class="hidden">
// thumbnails go here
</div>
JS
// Justify Gallery
$("#justify-gallery").justifiedGallery({
rowHeight: 100,
fixedHeight: true,
captions: false,
margins: 3,
lastRow: 'nojustify'
});
$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
$(this).fadeIn();
});
Yes you're in the right track, if your current code sort of works, then you can add a parent container to the hidden class, and add a loading animation to it, then use css to position absolute the images or hide the loader, up to you.
<div class="parent-with-loading-animation">
<div class="loading-animation"></div>
<div id="justify-gallery" class="hidden">
// thumbnails go here
</div>
</div>
Just give the parent div a min-height of whatever you reckon would be the average height of images and a width 100% depending on your layout of course.
$('#justify-gallery').justifiedGallery().on('jg.complete', function (e) {
$('.loading-animation').fadeOut();
$(this).fadeIn();
});
Oh boy, on a second visit to the site I found an article on performance; where it states if you add a class of .justified-gallery it will only show the thumbnails once loaded. In all fairness this vital info should have been put in a more prominent spot.
http://miromannino.github.io/Justified-Gallery/performance-tips/
Hi there,
I'm currently working on a slider made with RoyalSlider. In this slider I've got arrows left and right. So, my code, to made it simple, is something like that :
<div class="royalslider">
<div class="slide">Slide Content</div>
<div class="slide">Slide Content</div>
<div class="slide">Slide Content</div>
<div class="arrowleft"></div>
<div class="arrowright"></div>
</div>
The slides are draggable by the mouse, or you can click arrow to go next or previous...
with the API of royalSlider, I can manage, event like this :
slider.ev.on('rsDragStart', function(event) {
// mouse/touch drag start
});
slider.ev.on('rsDragRelease', function() {
// mouse/touch drag end
});
My question is :
I want to animate the opacity of my arrow from 1 (initial state) to 0 when i'm dragging my slides, I mean in relation to the slide position.
eg :
I start dragging my slide, the opacity begin to fadeOut, I stop dragging but don't release my slide, the opacity stop fading, I move the other side, opacity fadeIn....
Is it possible with jquery to do something like this ??
Hope I'm clear :-/
Many thanks
PS: Sorry for my frenglish :)
If your question is about how to handle opacity of the element in jquery, yes you can do it very elegantly.
Here is the API link, http://api.jquery.com/category/effects/fading/
And if you want to play with Fiddle, here it is, http://jsfiddle.net/80kqetf4/
Now coming back to your case, something like below would help,
slider.ev.on('rsDragStart', function(event) {
// mouse/touch drag start
var visibility = <calculate visibility based on slider position>; // 0-min & 1-max
$('selector').fadeTo(1000, visibility);
});
slider.ev.on('rsDragRelease', function() {
// mouse/touch drag end
var visibility = <calculate visibility based on slider position>; // 0-min & 1-max
$('selector').fadeTo(1000, visibility);
});
Of course you could optimize this code further..
THE SITUATION:
I am using for my slideshow the Slider Revolution plugin.
I need to set different times (duration) for the images displayed.
For example the first image i need to display for just 2 seconds, while the second image for 7 seconds.
THE QUESTION:
How can i set the time that last a single item?
Is it possible?
THE CODE:
In the js function that initialize the plugin, there are these setting:
delay:9000,
and changing it, it is possible to set the duration, but will regard all the items.
This is the js function:
initRevolutionSlider: function () {
var tpj=jQuery;
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
var api = tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:960,
startheight:250,
onHoverStop:"off", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:1,
navigationType:"bullet", // bullet, thumb, none
navigationArrows:"solo", // nexttobullets, solo (old name verticalcentered), none
navigationStyle:"round-old", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"bottom", // Horizontal Align left,center,right
navigationHOffset:30,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"on", // Enable Swipe Function : on/off
stopAtSlide:-1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:-1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
This is the HTML for a single item:
<div class="fullwidthbanner">
<li data-transition="3dcurtain-vertical" data-slotamount="10" data-speed="100" data-masterspeed="300" data-thumb="assets/img/sliders/revolution/thumbs/thumb1.jpg">
<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
<img src="img/slideshow/1.jpg">
</li>
</div>
In this case data-speed and data-masterspeed regards the time of the transition, not the time that last the item.
Someone knows perhaps how this can be achieved?
It has to be done in the HTML or perhaps in the js function ?
Thank you very much!
According to this documentation [dead link removed], pretty sure it is for your plugin, it provides a data-delay config for each slide.
See the docs under the "02 Slider items" header in the page.
<div class="fullwidthbanner">
<li data-transition="3dcurtain-vertical"
data-delay="2000"
data-slotamount="10"
data-speed="100"
data-masterspeed="300"
data-thumb="assets/img/sliders/revolution/thumbs/thumb1.jpg">
<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
<img src="img/slideshow/1.jpg">
</li>
<li data-transition="3dcurtain-vertical"
data-delay="7000"
data-slotamount="10"
data-speed="100"
data-masterspeed="300"
data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">
<!-- THE MAIN IMAGE IN THE SECOND SLIDE -->
<img src="img/slideshow/2.jpg">
</li>
</div>
I would like the slideshow to be collapsed by default. Right now when going to this page http://dev-caal.gotpantheon.com/membership we can see the slideshows for a split second and it then slides up. I would like it to be collapsed by default.
This is the js code:
$(document).ready(function(){
$('.jcarousel-clip').slideUp();
$(".jcarousel-prev, .jcarousel-next").hide();
$('.updown3').click(function() {
$('.jcarousel-clip ').slideToggle(300, function() {
$('.updown3').toggleClass('arrow-up');
$(".jcarousel-prev, .jcarousel-next").toggle();
return false;
});
});});
Render it off the page, collapse it, then inject it into the area you would like
or you can try doing element.hide().slideUp(function(){this.show();});
You can add a display: none to .jcarousel in your css file and only show it afterwards.
So I have a section where I'd like to click on the image and have .speaker-info animate open by toggling class .open on .speaker-container to animate the height to reveal .speaker-info while toggling the class .hover for a hover state image. A .fade class also gets toggled on to .speaker-info to change the opacity. I got everything working fine if I click one image and close it with the same location, but when I open one and click another image everything closes, so I'll need two clicks to open the other, and the hover image states on for the previous image.
So I'd like to open one div and then if another image clicked, all close and the recent one opens.. I've been going around in circles trying to figure the best way to do this.. but I keep hitting a wall.
I'm basically triggering everything by toggling css classes to create the opening/closing and hovering.
Here's my code.
Also, I'm looking for opinions on how to make my code more nimble, and more efficient, sometimes I feel like I write waaay to much where I could do the same with a few lines less.
Thanks!
<section id="speakers">
<div class="container">
<div class="row">
<div class='speaker-container'>
<div class="span3 offset1" id="{row_index}">
<div class="speaker-img">
<img src="{speaker_image}" alt="{speaker_name}" class="hover">
<img src="{speaker_hover}" alt="{speaker_name}">
</div>
<h4>{speaker_name}</h4>
</div>
<div class="speaker-info">
<button class="close-speaker">Close</button>
<h3>{speaker_name}{if speaker_title}, {speaker_title}{/if}</h3>
<p>{speaker_bio}</p>
</div>
</div>
</div>
</div>
</section> {!-- /End Speakers --}
Javascript codes
$('.speaker-container').each(function(){
var containerHeight = $(this).height();
$('.speaker-info').css({ 'top' : containerHeight});
});
$('#speakers .span3').on('click', function(){
var containerHeight = $(this).parent('.speaker-container').height();
var h = $(this).next('.speaker-info').height();
var totalHeight = containerHeight + h;
$(this).find('.speaker-img').children().toggleClass('hover');
$('#speakers .span3').not($(this).next('.speaker-info')).next('.speaker-info').removeClass('fade');
if (!$('.speaker-info').hasClass('fade') && !$('.speaker-container').hasClass('open')) {
$(this).closest('.speaker-container').css({'height' : totalHeight}).addClass('open');
$(this).next('.speaker-info').addClass('fade');
} else {
$('.speaker-container').css({'height' : h}).removeClass('open');
$(this).next('.speaker-info').toggleClass('fade');
$('.speaker-info').removeClass('fade');
}
});
$('.close-speaker').on('click', function() {
var container = $(this).closest('.speaker-info').height();
$(this).closest('.speaker-container').css({'height' : container}).removeClass('open');
$('.speaker-info').removeClass('fade');
});
I suggest you can use JQuery for that feature you want to do. Here's the link for your reference: JQuery Accordion. I hope it helps. Thanks!