Can you help me to hide the caption only on the first slide in Nivo Slider. I have this code:
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
I need to use something like this construction
FirstSlide: function(){}
But I don't how to add to this function the CSS-parameter:
.nova-caption{display:none;}
Related
I have a problem with Swiperjs, that I'm trying to make the crossfade, but it doesn't crossfade like it should, but between showing the two images it adds approximately 20% white overlay between the two images.
Hard to describe, but as if it would first fade the image to 20% white overlay, so the image brightens a bit and then it fades to the next image. So maybe it's not obvious, but still not the same as
JS:
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
loop: true,
speed: 2000,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
Just standard Swiper JS, nothing fancy here which would change how the animation behaves. HTML exactly the same as on their page, not changed.
I'm going through the same thing.I try to add "animation" function below the transition(duration) function.But error was throw said "animation was not a function".I don't know why I can't add my own function in the javascript source file swiper-bundle.js.And if modify the transition(duration) function directly it dosen't work either.Maybe I need read the source file deeply.
<div id="div_container_photos" class="cands_container" style="margin-top: 20px;min-height:300px">
<div class="row" id="flexRow" style="margin:0px ;min-height:100%">
<div id="flex_div_select" class="col-sm-4 col-xs-12" style="padding:0px ; padding-right: 15px">
</div>
<div id="flex_div_show" class="col-sm-8 col-xs-12" style="padding:0px; height:100%">
</div>
</div>
</div>
I have 2 flexsliders: the first one selects an album; de second one shows the photos inside that album. My problem is that the flexSlider only shows photos when I initiate it inside $(document).ready(function () {});
I have tried using addSlide but that didn't work either.
So inside $(document).ready I initiate the album Slider:
function maakFlexSliderAlbums()
{
console.log("[FLEXSLIDER]about to create flexslider for selecting albums; number of album inside s_php_arrayNonStripped: " + js_php_arrayNonStripped.length);
return $.Deferred(function () { // <-- see returning Deferred object
var self = this;
var flexSlider;
flexSlider = '<div class="flexslider" style="margin:0px; background-color:#AAA" ><ul class="slides">';
for (var i = 0; i < js_php_arrayNonStripped.length; i++)
{
console.log("[FLEXSLIDER]adding <li> " + js_php_arrayNonStripped[i] + " </li> to mapslider");
flexSlider += '<li><div style="width: 50%; margin: 0 auto;"><h2>' + js_php_arrayNonStripped[i] + '</h2></div></li>';
}
flexSlider += '</ul></div>';
$("#flex_div_select").append(flexSlider);
console.log("[FLEXSLIDER]DOM is build...now initializing");
$('.flexslider').flexslider({
animation: "slide", //String: Select your animation type, "fade" or "slide"
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: js_php_arrayNonStripped.length - 1, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: false, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 1000, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
// Usability features
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// Primary Controls
controlNav: false, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
// Secondary Navigation
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
// Special properties
controlsContainer: "", //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "", //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 3, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// Callback API
start: function (slider) {
console.log("[FLEXSLIDER]map slider loaded; current slide= " + slider.currentSlide + " ; so that would be " + js_php_arrayNonStripped[slider.currentSlide]);
//when you click an album
$('#flex_div_select .slides li').click(function (event) {
event.preventDefault();
//clicked album -> italic
$('#flex_div_select .slides li h2').css('font-style', 'normal');
$('#flex_div_select .slides .flex-active-slide h2').css('font-style', 'italic');
var album = $('#flex_div_select .slides .flex-active-slide h2').html();
console.log("clicked album slider: " + album);
//get photos from server
// getPhotos(album);
///////////////////////////////////////////////////////////
INITIATE #photoSlider HERE ??
///////////////////////////////////////////////////////////
//slider.flexAnimate(slider.getTarget("next"));
});
//return promise
self.resolve();
}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function () {
}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function (slider) {
if (slider.currentSlide >= js_php_arrayNonStripped.length)
{
/* newAlbumFolder = $("#txtNewFolder").val();
console.log("[FLEXSLIDER] slided to " + slider.currentSlide + " ; so that would be " + newAlbumFolder);
*/ //console.log("new album detected: " + newAlbumFolder);
}
else
{
newAlbumFolder = js_php_arrayNonStripped[slider.currentSlide];
console.log("[FLEXSLIDER] slided to " + slider.currentSlide + " ; so that would be " + js_php_arrayNonStripped[slider.currentSlide]);
// console.log("excisting album detected: " + newAlbumFolder);
}
// console.log("newAlbumFolder: " + newAlbumFolder);
}, //Callback: function(slider) - Fires after each slider animation completes
end: function () {
}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function () {
}, //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function () {
} //{NEW} Callback: function(slider) -*/
});
console.log("[FLEXSLIDER]flexslider initialised");
});
And when I click on the corresponding album I want to initiate #photoSlider.
The only way the #photoSlider gets populated is when I use:
var poging = here comes listsyntax inside quotes;
initFlexSliderVoorPhotos(poging); inside document.ready
the above function does something like:
flexSlider = '<div class="flexslider" style="margin:0px; height:300px; background-color:#AAA" id="photoSlider" > <ul class="slides" style=""> ';
//<div class="flex-viewport" style="overflow: hidden; position: relative;">
flexSlider += slides +'</ul></div>';
$("#flex_div_show").append(flexSlider);
$('#photoSlider').flexslider({....}) (this doesn't get executed!)
Is it possible to have manual trigger for transitions from one slide to another.
If I use $JssorArrowNavigator$, it does slide to next/previous, but without transitions.
Adding custom actions $PlayTo, $GoTo, $Next also just slides to next, but without transition.
$Play starts the slideshow with the transitions but there is some initial lag of ~10s.
Slideshow transition plays only for 'auto play'.
While auto play, you can assign transition for specific slide.
function SlideParkEventHandler(slideIndex, fromIndex)
{
if(slideIndex == 0)
{
jssor_slider1.$SetSlideshowTransitions([{transition_code1}]);
}
else if(slideIndex == 1)
{
jssor_slider1.$SetSlideshowTransitions([{transition_code2}]);
}
else
{
jssor_slider1.$SetSlideshowTransitions([{transition_code3}, {transition_code4}, ...]);
}
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
I have implemented the following railscast for my project :- http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?view=asciicast . I have been able to make this work seamlessly with a few changes as well. Now, I am trying to add a slideshow (using zurb-foundation carousel) to each of my products element. The problem I am facing is that when the first time the page loads, the slide show works perfectly. However, when I click on any of the pagination/sort/search links, the slideshow gets converted into plain images (jquery component is not loaded).
I am not sure what I am missing.
Here's my code snippet :-
Products.js
$("div.slideshow_list_page").orbit({animation: 'fade', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: false, // true or false to have the timer
resetTimerOnClick: false, // true resets the timer instead of pausing slideshow progress
advanceSpeed: 4000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: false, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: true, // true or false to activate the bullet navigation
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){}, // empty function
fluid: true} );
application.js
$(function () {
$('#products th a, #products .apple_pagination a').live('click', function () {
$.getScript(this.href);
return false;
});
});
products.html.erb
<td><div class="slideshow_list_page">
<%= image_tag "logo.png" %>
<%= image_tag "rails.png" %>
</div>
</td>
thanks,
Amit
In the Sencha Touch Charts 2 beta distribution, the Drawing guide example code has an example of a Sprite listening for touch start. The code given fails to draw any sprites, because it fails to insert a canvas onto the DOM. However this can be fixed by replacing this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
items: drawComponent
});
with this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
chart: drawComponent
});
Now, I'd really like to get the event handling to work. The example code continues with:
// Add a circle sprite
var myCircle = drawComponent.surface.add({
type: 'circle',
x: 100,
y: 100,
radius: 100,
fill: '#cc5'
});
// Now do stuff with the sprite, like changing its properties:
myCircle.setAttributes({
fill: '#ccc'
}, true);
// Remember always to refresh the image
drawComponent.surface.renderFrame();
// or animate an attribute on the sprite
// no need to refresh the image when adding animations.
myCircle.fx.start({
fill: '#555'
});
// Add a touch listener to the sprite
myCircle.addListener('touchstart', function() {
alert('touchstarted!');
});
but that final alert never happens on touch. Any ideas?
drawComponent.addListener('touchstart'... works fine, but is of course not localised to the circle sprite.
--- after more investigation ---
I think the answer is simply that event handling on sprites his not implemented yet. e.g. in touch-charts/src/draw/engine/Canvas.js we have in the definition of Ext.draw.engine.Canvas,
getSpriteForEvent: function(e) {
return null; //TODO!!!
},
OK - time to change the question from 'how?' to 'when?':
'When will Sencha Touch support Sprite event handling?"