Loading jquery elements with ajax pagination in rails - ruby-on-rails-3

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

Related

Swiperjs fade transition doesn't crossfade properly, instead adds white cross transition effect

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.

Does swiper progress event block mousemove event?

I'm using a basic swiper with no option. Then I have a listener for "mousemove" in the body of my site. I did this to build a mouse follower effect. This works well, but when I start to drag a slide, it seems this event will not arrive anymore and my custom div "used for mouse effect" does not move.
I finally found a solution in the api! You can set touchStartPreventDefault to false:
this.mySwiper = new Swiper(".swiper-container", {
touchStartPreventDefault: false
})
Look for the Touches section in the #Parameters
touchStartPreventDefault: false
causes firefox swipe bug.
You can use pointermove instead of mousemove.
Bro after full day of testing this is what finally worked
const slider = new Swiper(e, {
slidesPerView: 'auto',
direction: 'horizontal',
speed: 200,
loop: true,
touchStartPreventDefault: false,
allowTouchMove: true,
})

disable scrolling when trigger owl carousel on mobile device

I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:true,
items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});
Appreciated the answer from expert out here.
Thank you.
I made this work with the help of OwlCarousel2 events.
There are 2 events we can use together for this purpose:
drag.owl.carousel fires when user start to drag
dragged.owl.carousel fires when dragging finished
And this make it work like how we want it:
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
});
owl.on('drag.owl.carousel', function(event) {
$('body').css('overflow', 'hidden');
});
owl.on('dragged.owl.carousel', function(event) {
$('body').css('overflow', 'auto');
});
So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.
This works on iOS & VueJS.
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
})
// disable scroll
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
})
// enable scroll
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
})
look for the below piece of code in custom.js file of your project
Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,
mouseDrag: true,
touchDrag: true,}
change the things to below:-
touchDrag:false,
and owl-carousel will simply stop scrolling horizontally both on mobile and desktop drag!
For owlcarousel2, you can use mouseDrag option.
$('.owl-carousel').owlCarousel({
mouseDrag:false
});
Reference https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
in owl.js
mouseDrag: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,

Hide caption on the first slide (Nivo Slider)

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;}

Flexslider 2 how to (re)initiate after page load

<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!)