marktuk / blueberry Goto Github PK
View Code? Open in Web Editor NEWA jQuery image slider plugin written specifically for responsive web design.
Home Page: http://marktyrrell.com/labs/blueberry/
License: GNU General Public License v3.0
A jQuery image slider plugin written specifically for responsive web design.
Home Page: http://marktyrrell.com/labs/blueberry/
License: GNU General Public License v3.0
jQuery Blueberry Slider v0.4 BETA http://marktyrrell.com/labs/blueberry/ Blueberry is an experimental opensource jQuery image slider plugin which was been written specifically to work with fluid/responsive web layouts. Copyright (C) 2011, Mark Tyrrell --- Changelog: v0.4 30-07-2011 Bug fixes and new features - Function added to automatically build the pager with an option to enable/disable - Bug fixed to allow multiple sliders on a single page - Keyboard navigation added (contrib. cbarnes0981) v0.1 02-07-2011 Released under GPL v3
When you have a slider at the top of the page and you're scrolled further down the page, the page jumps up slightly when the slide changes. I assume this is because the slider's height is 0 for an instance during the transition.
I've only noticed this issue in Chrome on OS X. It works perfectly on Firefox.
I'll fork to see if I can fix it.
If you click on a pager link to change slide, while the slider is currently transitioning to another slide, the timing gets broken.
It will start semi-skipping slides - e.g. as soon as arriving on slide 1, it will transition to slide 2, wait the regular amount of time, arrive on slide 3 and immediately transition to slide 4.
To reproduce the bug:
On a default install of the slider (the home page slider reproduces the bug)
The timing will now be broken, and the slider will begin to skip every second slide. (Well, it does not miss it completely, but it does not pause on the slide).
If you repeat those steps multiple times it seems to get even more broken - skipping whole slides etc.
One issue I've noticed is that using the pagination as a navigator doesn't reset the slide timing, for example
Slide time is set to 5 seconds, on the 3rd second I override by selecting another slide, instead of now staying for 5 seconds on that slide it only stays for 2 seconds before moving on.
I haven't got time right now but soon I will try to fix and let you know what I changed.
Thanks
I suspect the problem I'm having is related somehow to z-index, but I'm not sure.
Using Chrome, please take a look at this website: http://develop-datasupriweb.vtexcommerce.com.br/
I'm using the blueberry slider in it. On top of the slider, I've absolutely positioned a DIV and set its z-index to a high number, 60. It works fine on Chrome. But on IE9, the DIV flickers whenever a transition happens. However, hovering the mouse over the area where the DIV should be correctly triggers the cursor change to "pointer".
I have no idea how to solve it and I'm positive it has something to do with the slider.
I haven't investigated this yet but I think it's related to the timer, possibly to do with the way the play var is defined.
If you have multiple instances of the slideshow on one page, the previous and next buttons control both slideshows
to avoid a crashing slider, replace line 169 in blueberry.js with:
next = current == 0 ? slides.length-1 : current-1;
When a page has blueberry slider and a form, when user arrows left, right or spaces inside of form element, slider changes that direction when nav
is set to true.
Nick La:
"Performance issues on IE. It runs very slow on IE (tested on IE8) and it crashes resize the browser window."
Appears to be multiple instances of the timer getting created. Could be an issue with the overall concept of the timer.
The setsize function doesn't kick in until the page has loaded. This results in a zero height slider which can break layouts.
Pressing left arrow for slide count + 1 leads to empty slides being rendered in page.
add caption/title above or below image
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.