I've downloaded Fraction Slider from #jacksbox and have gone through the documentation countless times now and cannot figure out why my slider won't show the effects it's supposed to. This is the site I'm working on: http://pacificdesignacademy.com/NEW/2 and this is an example of what the slider is supposed to do: http://jacksbox.de/stuff/jquery-fractionslider/.
Here is the path to my js: ../NEW/2/fractionslider/jquery.fractionslider.js
And here is the path to my css ../NEW/2/fractionslider/fractionslider.css
All of the images are just stacking on top of one another regardless of me defining overflow:hidden on the containing element.
Not sure what else to do here, so any help is greatly appreciated. I'm supposed to launch this site September 1st... eep!
Thanks!
A simple check in the browser's console showed you have a syntax error on line 594 of your page. You have a closing parenthesis instead of an opening brace.
UPDATE After you fixed that, you're now getting the error :
Uncaught ReferenceError: jQuery is not defined
I suggest you move your code and place it after you've included both jQuery and the slider plugin, so your page should look like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>
<script type="text/javascript">
jQuery(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1200,400",
'increase': false,
'pauseOnHover': true
});
});
</script>
You are missing an opening parenthesis when calling the plugin.
Change
$('.slider').fractionSlider()
To
$('.slider').fractionSlider({
On line 593
FractionSlider is garbish! Use LiquidSlider instead!
What one doesn't have but exist in the other:
well formated object oriented code,
automatic hardware acceleration with the new CSS3 transforms if the browser supports it (no js animation here!),
keyboard navigation,
hash linking where user can bookmark a specific slide or land to a page that opens slider to a specific slide,
many effects,
mobile 'swap' support
user extensible.
Of course it uses some other libraries and code snipets 'stolen' from here and there (https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ but actually it's reduntant as the use of Moderniz library in responsive designs makes the detection as simple as a one-line command, http://easings.net/ for the easing equations, https://daneden.me/animate/ for the transformations etc.)
The idea behind FractionSlider is indeed unique but the implementation sucks!
Related
I'm looking to JavaScript Packery component. I want to switch the current implementation from GridStack to Packery. One thing that stops me right now is a lack of dynamic resizing effect of components(panels) in Packery. Right now I'm unable to find this feature in demo or documentation.
Is any way to implement/enable this feature in Packery?
This can certainly be done. Use the "Responsive Layouts" set-up as your model: https://packery.metafizzy.co/layout.html#responsive-layouts
Critically, you should also use Metafizzy's own imagesLoaded js to load the javascript after the images are fully loaded: https://imagesloaded.desandro.com
The full javascript call (packery inside of imagesLoaded) should look like this:
<script type='text/javascript'>
$('.grid').imagesLoaded( function(){
$('.grid').packery({
itemSelector:'.grid-item',
percentPosition:true, // *critical for responsive layout*
// your own further options
});
});
</script>
If you are still having trouble, try reversing the js call so that imagesLoaded is called after every image is loaded, as recommended on the Packery webpage: https://packery.metafizzy.co/layout.html#imagesloaded
Good Luck!
Is there an easy way to implement this? I am having trouble getting it to work properly. I tried following the instructions on the website to have it load at window.onload, but Worklight seems to fire that call before the DOM is even visible, so I couldn't do that. I have some initialization code and so I am calling the following method in that code:
function runSwiper(){
// iDangerous Swiper
var mySwiper = new Swiper('.swiper-container', {
pagination : '.pagination',
loop : true,
grabCursor : true,
simulateTouch : true,
paginationClickable : true
});
}
Yet, all I see in my carousel is just Text. I have two test slides in there currently, but the slide doesn't even seem to work on my Android emulator. Is there anything else I need to be doing for this to work properly? If not, is there something that works as nicely as this that will play nice with Worklight?
I am using worklight version 6.2. I am usingth is: http://www.idangero.us/sliders/swiper/api.php
What I am aiming to do is fade out one div that has information, and fade in another div that has more info and the Swiper present, so initially this swiper will be hidden.
I turns out, in my case, the easiest way to call the swiper to initialize was later on (being that it was in a hidden div) instead of at window.onload. In addition, I had some issues with slides disappearing, which I fixed by having the slides pre-defined in the HTML instead of adding them dynamically.
I am trying to put nivo-slider on my drupal home page. Although all images are showing but they are not sliding and when I check consol, I see an error in nivo-slider.js file i.e.
"Uncaught TypeError: undefined is not a function"
My nivo-slider.js code is-
(function ($) {
Drupal.behaviors.nivoSlider = {
attach: function (context, settings) {
// Initialize the slider
$('#slider').nivoSlider({ *//here I am getting error mentioned above*
'effect': Drupal.settings.nivo_slider.effect, // Specify sets like: 'fold,fade,sliceDown'
'slices': Drupal.settings.nivo_slider.slices, // For slice animations
'boxCols': Drupal.settings.nivo_slider.boxCols, // For box animations
'boxRows': Drupal.settings.nivo_slider.boxRows, // For box animations
'animSpeed': Drupal.settings.nivo_slider.animSpeed, // Slide transition speed
'pauseTime': Drupal.settings.nivo_slider.pauseTime, // How long each slide will show
'startSlide': Drupal.settings.nivo_slider.startSlide, // Set starting Slide (0 index)
'directionNav': Drupal.settings.nivo_slider.directionNav, // Next & Prev navigation
'directionNavHide': Drupal.settings.nivo_slider.directionNavHide, // Only show on hover
'controlNav': Drupal.settings.nivo_slider.controlNav, // 1,2,3... navigation
'controlNavThumbs': Drupal.settings.nivo_slider.controlNavThumbs, // Use thumbnails for Control Nav
'pauseOnHover': Drupal.settings.nivo_slider.pauseOnHover, // Stop animation while hovering
'manualAdvance': Drupal.settings.nivo_slider.manualAdvance, // Force manual transitions
'prevText': Drupal.settings.nivo_slider.prevText, // Prev directionNav text
'nextText': Drupal.settings.nivo_slider.nextText, // Next directionNav text
'randomStart': Drupal.settings.nivo_slider.randomStart, // Start on a random slide
'beforeChange': Drupal.settings.nivo_slider.beforeChange, // Triggers before a slide transition
'afterChange': Drupal.settings.nivo_slider.afterChange, // Triggers after a slide transition
'slideshowEnd': Drupal.settings.nivo_slider.slideshowEnd, // Triggers after all slides have been shown
'lastSlide': Drupal.settings.nivo_slider.lastSlide, // Triggers when last slide is shown
'afterLoad': Drupal.settings.nivo_slider.afterLoad // Triggers when slider has loaded
});
}
};
}(jQuery));
Help me to sought out this error..thanks!!
Include jquery.js main file in header before any js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
When you use two different versions of jquery (which is not recommended), you can use
jQuery.noConflict
api.jquery.com/jQuery.noConflict/
I had encountered a similar problem before. This issue can be fixed by making use of Jquery Update module in Drupal 7 & setting the version of jquery library to 1.9 & above.
Do let me know in case of any doubts
Also please note that in Drupal you should never add Jquery library explicitly because Drupal core by default adds a jquery library.
When you try to add a jquery.js in the head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
There will be 2 jquery libraries now & which will conflict.
So we need to use jquery update module to upgrade the library
Another likely candidate is referring to jQuery with $ (dollar):
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#main-content").fitVids();
});
If you instead use the no-conflict reference in your script, as below, this may fix the error
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
jQuery("#main-content").fitVids();
});
I just ran into some issues configuring Nivo View Slider on Drupal 7.
I didn't read the module's documentation at first but it looks like Nivo Slider's library isn't included in the package, you need to upload it manually to your server.
Here is the documentation : https://www.drupal.org/project/views_nivo_slider
To sum it up :
install/enable Library API
download Nivo Slider libs from https://github.com/gilbitron/Nivo-Slider/downloads
unzip the archive to sites/all/libraries/nivo-slider
At step 2, you'll have to choose between version 2.x or 3.x
On the module's project page, it says that version 3.x might be broken on Google Chrome, I didn't have any issue myself...
I'm sure that this is probably not to difficult to do, but I'm not very experienced with Javascript and could really use some pointers!
I have implemented NIVO LIGHTBOX http://dev7studios.com/plugins/nivo-lightbox/ (by the same makers of Nivo Slider) on my website and now want to enable touch / swipe gestures for this plugin so that someone can navigate if they visit my site on a ipad/iphone etc.
1) what touch library should I use? There seem to be a lot, and I'm not sure which one is best or easiest to use? I only want to have single finger, left and right swipe functionality for navigation. a minimum swipe (ie 50px) to active the navigation is probably a good idea as well.
2) What do I need to put in the header? (please help me out by providing some specific code if you can). I assume that I'll need:
- Link to plugin (I'm okay with how to do this)
- What code is required to fire off the touch gestures?
3) How do I link the DIV or IMG tag for the lightbox to the so that it works?
4) Ideally I'd also like to hide the navigation arrows if a touch device is detected?
My website is here: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/
Many thanks for your assitance.
This approach worked for me: http://www.janes.co.za/easy-ipad-gestures-in-your-website-with-jquery/
Below is the code I added to my Functions.php to add in the necessary javascript:
function child_theme_head_script() {
?>
<script src="<?php bloginfo('stylesheet_directory') ?>/js/jquery.touchwipe.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('body').touchwipe({
wipeLeft: function(){ jQuery(".nivo-lightbox-next").click(); },
wipeRight: function(){ jQuery(".nivo-lightbox-prev").click(); },
min_move_x: 20,
min_move_y: 20,
preventDefaultEvents: false
})
});
</script>
<?php
}
add_action( 'wp_head', 'child_theme_head_script' );
I was hoping that someone can help me with this fancybox plugin issue.
Problem is in the IE7 and IE8.
Error - SCRIPT87: Could not get the display property. Invalid argument.
As I noticed scripts break on this line:
$(fx).animate({prop: 1}, {
duration : currentOpts.speedIn,
easing : currentOpts.easingIn,
step : _draw,
complete : _finish
});
I'm using jquery version 1.4.2
live example and issue on this link:
http://goo.gl/x0rF7
You are adding 3 instances of jQuery when you only need one (ideally the latest version): http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://www.crystalhotel-belgrade.rs/test/plugins/content/simplepopup/jquery-1.4.3.min.js
and an empty call to
http://www.crystalhotel-belgrade.rs/test/jomres/javascript/jquery-1.4.2.min.js
.....Also you are loading jQuery UI twice
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js
http://www.crystalhotel-belgrade.rs/test/jomres/javascript/jquery-ui-1.8.5.custom.min.js
IE is more susceptible to this kind of conflicts/errors than other browsers. Try reducing your calls to a single instance of each script and beware of the order (jQuery first and jQuery plugins after)
Additionally, make sure that the DOCTYPE is the very first line of your html document (not preceding spaces or comments), otherwise IE will fail to run in standards mode hence fancybox won't work properly.
Problem fixed.
Not the best way but it working
$(fx).animate({prop: 1}, {
duration : currentOpts.speedIn,
easing : currentOpts.easingIn,
step : _draw,
complete : _finish
});
I removed all animation and just wrote
_finish();
Thanks for the answer JFK, I tryed with that but no