jor_carouselManipulation 11.0

[jordan]

jor_carouselManipulation 11.0

=======================================================================================



=======================================================================================

jor_carouselManipulation adds cool additional functions to the WB Carousel component

=======================================================================================

ALL OF IT'S COOL FUNCTIONS

01. a new autoplay timer with enhanced functions
--- loop continues playing after event click
--- optional WB jQuery progressbar component as a visual timer display (+single style the jQuery progressbar)
--- optional WB jQuery slider component as an external slide control (+single style the jQuery slider)
--- optional WB Text object as a page counter
--- optional WB Image objects as next/prev navigation buttons
--- optional WB Text object as a pause/resume button (+fade text option)
--- optional WB object as a pause/resume by class
--- optional WB Image objects as stop/play buttons
--- NEW** in Update 10 - auto switch - only engage autoplay if the carousel is in view
02. event lock (prevent event bubbling, queuing)
03. add a smooth pager preview by using WB Image objects (preview on internal + external pagers)
--- style the Image, Shape,ClipArt or TextArt in a WYSIWYG fashion (dimension, effects)
--- preview direction - top, bottom, left or right (internal - external separate)
04. restyle by re-positioning the navigations (pagers-prev-next) and customizing the pagers
05. delay autoplay first slide
06. multiple carousel instances
07. all jor_carouselManipulation functions synced to internal and external navigation (exclude: swipe)
08. set background properties per frame (color/image/-repeat/etc)
09. thin film carousel - full width carousel which allows the content to be visible w/ transparent blocks on either side
--- NEW** in Update 10 - cover switch + smart object animation
10. effect direction mode - 2 modes random and clock-wise
--- ie. selecting - slide up - with mode: clock-wise will produce slide left - top - right - down - slide left - top - ri ... etc etc
11. callback before
12. animate into position
animate any WB object inside the carousel into position - jQuery left, right, top, bottom position and/or fade-in
easily create stunning eye catching interactive animated banners, slideshows etc ... in WYSIWYG style
--- works on pretty much any WB object inside the carousel by ID (set fx,delay,speed,easing)
--- works in combination with all available carousel effects
--- works in full width mode
--- works with all jor_carouselManipulation's internal and external functions
--- NEW** in Update 10 - CSS3 animation - animate.css library included + create custom fx (keyframe) + target by class
13. external control by use of classes (next/prev/stop/play/pager)
14. autoplay in random order
15. NEW** in Update 10 - full width pseudo fix - kill overlap (remove overlap) + staticX (counter horizontal scrollbar)
16. NEW** in Update 10 - full RWD compatible

AND OH YEAH MAMA - - IT'S-STILL-FREE - CRAZY CHICKEN!

=======================================================================================

DEMO jor_carouselManipulation: visit jorextensions.com
DOWNLOAD: jor_carouselManipulation
-------- see the - jor_carouselManipulation_easystart.wbs - project in the download for many examples!

Builder: jordan (6j6)
Code: jordan (6j6)
EB version: 5.3.2
WB version: 10+
jQuery lib: 1.11.1/1.12.4/(2.1.1/2.2.4)
jQuery UI: 1.10.0/1.11.4
W3C valid: Html, Xhtml
additional: jQuery touchSwipe
additional: animate.css
additional: CSS3 easing
License: released under the MIT and GPL licenses

=======================================================================================

HISTORY:
-#-#-#- version 1 - 5: -#-#-#- 01/feb/12 - 10/feb/13
01. note: jor_carouselManipulation version 6 is a rewrite of jor_carouselManipulation (see .pdf in download)

-#-#-#- version 6 - 9b: -#-#-#- 27/jan/2015
- version 6 to 9b = WB8+

-#-#-#- version 10: -#-#-#- 04/oct/2015
01. added : added option - corner radius for jQuery slider and progressbar
02. fix/enhanced : thin film mode - abide RWD design (visibility) - (rewrite)
03. changed : thin film mode - option "position | index" removed - (z-index is now set as the carousel resides)
04. enhanced : thin film mode - added option - top position (auto/manual) - RWD enhancement
05. added : thin film mode - added option - FRAME: border/background size/shadow
06. added : thin film mode - added option - BLOCK: background image/size/shadow
07. new : thin film mode - new option - block cover opacity switch (first/last slide)
08. new : thin film mode - smart object animation - only animate if object is not in view
09. enhanced : callback before now also executes at carousel init.
10. fix : jQuery slider vs carousel effects mode fix
11. fix : object animation abide RWD design - (rewrite)
12. new : object animation now also include CSS3 animation - (included animate.css library)
13. new : object animation - CSS3 animation - also target by class
14. new : object animation - new option - create custom CSS3 keyframe animation (advanced)
15. new : new option - auto switch - only engage autoplay if the carousel is in view (vertical axis)
16. new : full width pseudo fix - new option - kill overlap (remove overlap)
17. new : full width pseudo fix - new option - staticX (counter horizontal scrollbar)
18. changed : compiled with EB5.2 - (WB10+ only)
19. additional : other internal improvements
20. additional : updated jor_carouselManipulation_easystart.wbs project

-#-#-#- version 11: -#-#-#- 17/jul/2016
01. fix : responsive mode - circular (backward motion) fix
02. fix : responsive mode - jquery object animate left/right fix
03. fix : responsive mode - option kill overlap fix
04. fix : responsive mode - option staticX fix
05. new : new option - object animation css3 easing
06. enhanced : window alert on thin film mode vs full width mode
07. enhanced : compiled with EB5.3.2
08. additional : other minor improvements

- for full update history see .pdf in download

[protectourlands]

Jordan your work on this is greatly appreciated. I was just finishing a carousel using events for pagination images. This extension provides many more functions I can use. Nice work!

[stamjoe]

Thanks Man
you provide always useful extensions.
Cheers
Joe

[jordan]

Jordan your work on this is greatly appreciated. I was just finishing a carousel using events for pagination images. This extension provides many more functions I can use. Nice work!

hi protectourlands,

real glad to hear you like it and can use it
if you got questions or suggestions just give a shout . .

[jordan]

Thanks Man
you provide always useful extensions.
Cheers
Joe

hi stamjoe,

thank you, very much! - very glad you like them
also, any question or suggestion just let me know . .

[protectourlands]

I've discovered that the bullets can also be replaced with individual WB objects using js for the onclick. Turn off pagination.

Code: Select all

$('#Carousel1').carousel('goto,1');return false;

Where "Carousel1" is the carousel object name, and goto,"1" is the slide assigned to the image. Just thought I would share this capability in case you decide to add it to this already awesome extension.

[jordan]

hi cj98,

does it not work with unicode ?
or do you mean I did not include it in the download ?
if the latter then you can convert it yourself to unicode using the wbxconvert.exe

[jordan]

hi protectourlands,

tnx for sharing!, but yep, knew about the event, it is in the jor_carouselManipulation_easystart project (the 3th example (external))

[protectourlands]

OOPS! Sorry Jordan. I dove right in after the download and didn't see the demo. Brilliant!

[jordan]

jor_carouselManpulation_update 1

1. fixed : combination masterpage as layer and carousel brakes pager preview
2. new : page counter by WB Text object --(see demo at top post)
3. addit. : jor_carouselManipulation_easystart.wbs renewed

[jordan]

tnx debjit, great you like it . .

[jordan]

jor_carouselManpulation_update 2

01. new : event lock (prevent event bubbling, queuing)
02. new : autoplay bounce next/prev button removes on first/last enter
03. new : new autoplay modes - 'forward full carousel' and 'backward full carousel'
04. new : start on required slide
05. new : delay autoplay on first slide
06. new : fade option for pause/resume text
07. changed : rewrite prevent top function
08. new : optional jQuery slider as external slide control - 2 modes - (+single style the slider)
09. new : all functions can now be synced to internal and external navigation (exclude: swipe)
10. new : pagination preview on external objects
11. new : pagination preview direction - top,bottom,left,right (internal and external separate)
12. changed : NOTE: former "external by class" property is now "external by class | pause" property
13. changed : NOTE: former "preview adjust" property is now "preview | offset" property
14. addit. : jor_carouselManipulation_easystart.wbs renewed

see top post for full history + new demo

[Herbert]

Hi Jordan

thank you so much for this great extension!

Herbert

[jordan]

tnx Herbert great you like!

[jordan]

hi barrymol

internal: no
not possible on the internal pag/nav as the script is now, would take more then manipulation to change that

external: yes
you can create external pag/nav with jor_carouselManipulation and use WB shape/textart/clipart etc then enable hover-mode of the object
add # or Javascript:void(0) to the link of the object(s) used

[jordan]

01.

I tried setting the 'external by ID | Next' (ditto for last) to the ID of a shape. It didn't seem to do anything.
I would have expected it to cause the carousel to change. Instead, I am using the 'on click' event to trigger
the 'slideshow next' (ditto for last) action to advance the carousel. Is this the way I should do it?

no, don't use any event on the object
add the used object id to the – external by id | next – property, nothing more
(see also point 2 NOTE: id)

02.

I'm not sure what you mean here. I don't see an option to specify a javascript function to perform
as a link for the image object. Also, what you mean by 'add #''

if you enable a WB (shape) object into have a hover state, the object becomes a link (anchor)
add # or Javascript:void(0) to the objects link property, else it will execute an empty anchor
- - -
NOTE: id
when hover state on an object is enabled the id to target becomes the object holder ie. Shape1 becomes wb_Shape1
a string entered should then also become – wb_Shape1,wb_Shape2,wb_Shape3

03.

Also, is it possible to have the external pagination 'active' case have a different look?

no, active state is not possible

04.

I do not understand the pagination preview feature. I set the ID strings for the images that are
used for the pagination elements. Is that what I am supposed to do, I saw no change.

yes, the objects used are entered as a string, did you place the used objects on the page ?
(see also point 2 NOTE: id)

05.

I do not understand the prevent top feature. What does it mean for a page to jump to the top
due to navigation that this feature is supposed to prevent?

prevent top was a problem in an earlier version of the carousel
this problem has been resolved in the current carousel, this function has no purpose, just leave it to – true

===================
hope this helps … also take a look at the jor_carouselManipulation_easystart.wbs it has a lot of examples
if you have any more problems please provide a live link it will be much easier to help if I can see how you have set it up

[jordan]

01. hover - hover state used is add wb_ correct
02. page counter - enter the id of an WB text object, it will automatically create a visual display of the active pagination
03. hide - is it better to hide the objects?, yes, not a requirement though

a live link would work better yes … .

[jordan]

jor_carouselManipulation_update 3

01. enhanced : prevent text wrap on WB text
02. removed : prevent top function (obsolete)
03. added : pause/resume initial state

see top post for full history

[jordan]

hi barrymol

please download the jor_carouselManipulation_update3 update, I added a pause/resume initial state property
- add a WB text object, assign the id in the pause/resume text id property, set the pause/resume initial property to stopped

cheers!

[jordan]

01.
– text inside a shape – not possible – WB renders an image, not text and an image
– text also has events, with some custom code you could do it
– as far as hide/show progressbar vs prev/next on autoplay implanted in jor_carouselManipulation
maybe I will add it in the future but only if it is possible internal and external
02.
slider as a speed regulator ?
duration (timing) is already a problem to maintain crossbrowser with the progressbar as is
I think it would only become a greater problem if it would be changed dynamically
so, no I don't think this would be wise to add

[jordan]

hi octane

nope not possible, the WB carousel by design is not build to be used more then once per page
if you can not add more then one, you can not manipulate more then one
it can be done by using an iframe and linking them cross-window but that would take custom coding
so, in a simple way, no it can't be done

[jordan]

hi octane

yes, external control and continued autoplay (and more) is possible
take a look at the jor_carouselManipulation_easystart.wbs examples in the download and experiment with the settings

[jordan]

this can be done in a few ways, see example_external_2 of the jor_carouselManipulation_easystart.wbs
the simplest method would be to add the class frame to the external by class | pause property
external by class | pause: frame
not my first choice, but that should work

[jordan]

nope, WB Rollover Image can not be used as pager - Image,Shape,ClipArt,Text etc can be used

[jordan]

I don't know, here it works as it should, link opens from within the carousel, using WB8.5.1
can you provide a live example maybe ?
although I'm gonna take snap snap shuteye now . .

[jordan]

hi octane,

not possible as the code is at the moment, I think I would have to rewrite (a lot?)
jor_carouselManipulation by design locks the animation cycle ones it's triggered, so you have no fast response
if I would add mouseover, as is, the animation would become erratic
but, I will have a look at it, don't have much time at the moment, but as soon as I have some time I will

note:
you can control the carousel itself already by WB events
you could use those to create a mouseover on external objects
the animation then however will not stop but will be continues, queued
and you can not combine jor_carouselManipulation's features at the same time
but it is possible, just worth noting …

[jordan]

hi octane,

pagination event type is added - (NEW TIMER / pagination | event type)

cheers!

[jordan]

jor_carouselManipulation update 5

01. added: pagination event type (int+ext)

for full update history, demo and download see top post

[supersonictt]

Hello Jordan,

It seems that the extension does not work with version 9, am I right?

[jordan]

hi supersonictt,

not if the carousel uses any of the effects, the WB9 carousel uses 2 scripts to control the carousel
jor_carouselManipulation only targets the non-effects script
maybe I will create a version for WB9?, not planned in the near future tho …
I want to update all my existing extensions into 2013 first:)

so, if you want to use jor_carouselManipulation with WB9 use any of the non-effects modes

[supersonictt]

Jordan,

Thank a lot for the reply

[supersonictt]

Jordan, sorry for that, but I forgot to ask something:
Is there any code the I can add to the objects in the carousel to pause on hover while one of the effects is selected?
Am aware of the "class" to be added inside the tag while there is no effects.

Thank you

[jordan]

no, no specific code, there is nothing to target in the carousel to create a pause on hover
jor_carouselManipulation creates it's own interval for the carousel, that's how it can stop/start it
so, without jor_carouselManipulation you can't, not in a simple way, nope

[itsme]

hi, this is great , can we make this so if clicked on control images or anywhere in a page to stop playing? i am intending to use it as a site menu and i want to stop playing on clicking on pagination or the next/prev items... is it possible?

[jordan]

hi itsme,

a note first, jor_carouselManipulation at the moment only works on non-effect with WB9!

yes, you can pause the carousel with a WB Text Object (not image) in jor_carouselManipulation – (=NEW TIMER – pause/resume)
or you can create a pause on hover by adding a class to an object – (=EXTERNAL NAV. MAN. – external by class | pause)
in the download is a starting project that has many examples – jor_carouselManipulation_easystart.wbs
take a look at the examples and also the pdf manual
if you get stuck then give a shout and tell me where it stops for you, be glad to go from there!

[itsme]

thanks jordan, appreciated such effort, it is great actually

my need was to pause/resume on an image, or probably an image for play and image for pause, but i see it is not possible only for text!? why? i mean the text seems more hard to implement

okay for the class i have no idea, will try that and read the pdf also, so you mean i have to add this class in all possible clickable places so it will pause!?!?


Mike

[jordan]

nope, the class for pause (on hover) does exactly that, it pauses the carousel on object hover
it will not keep the carousel paused but will resume the carousel on mouse-out

yes, the text object is indeed harder to implement, but it gives the end-user a nicer experience in feedback I think

if you know a little custom coding it isn't hard to achieve what you want
you can use the function that is already there and make any object interact with it
I could make a property to add a class to objects to interact with the pause/resume text if you want ?
this way you could use images, but they will act as a switch just as the pause/resume text, single image – pause/resume

[itsme]

yes that will be indeed appreciated if you can help me
ok the need is to to use the carousel as a menu for a small site, it is 6 pages carousel
i need to start playing on page loading, that is fine (i will put it as 12 second to start moving pages...)
but, if hovering anywhere around the carousel i need it to stop, so the user can choose what to click!! otherwise he will be confused if kept playing
the normal functionality of wb carousel does do that ok, but i can't pause or resume it
also all navigation menues are images (next, previous, menues to specefic pages in the carousl are all images) so if i put the play,resume,next,previous images as well then it will look much more nicer for sure
any help is appreciated and thanks a lot in advanced in all cases

Mike

[jordan]

hello itsme,

I can not create a new function for a play and stop image
my offering was/is to create a function that hooks into the existing pause/resume text function
so you can click on an image and the text object switches between it's 2 existing states
not a complete new function that allows one image for stop and one image for play
implementing that would take much more work

also, what you describe, what you want on pause on hover can also not be achieved with jor_carouselManipulation
cause a pause on hover as implemented by jor_carouselManipulation stops/start the interval
In your example that would result in nothing less then confusion, cause each pause on hover would create a 12sec delay

the way you want to use the carousel is possible, but it takes a lot more custom coding to achieve that
I plan on creating a new version of jor_carouselManipulation for WB9, I will take your ideas with me, that will not be the near future tho:(

[itsme]

its ok my dear, appreciated your efforts really, it is one of the prefect extensions indeed

i tried to use the charmap function and use play sign and the pause sign as instead of the image (it is a text but shapped one, try run >charmap> see the symbols) but didn't work!
;4873

so for my case, its necessary if someone clicks anywhere in carousel to stop the play, it is better not use the extension, the normal carousel functions will do it for me

remains one thing, how if i want to use only the progress bar and the slider? i mean regardless to all other functions in the extensions, is it possible?

[jordan]

i tried to use the charmap function and use play sign and the pause sign as instead of the image (it is a text but shapped one, try run >charmap> see the symbols) but didn't work!

what is the charmap function ?

so for my case, its necessary if someone clicks anywhere in carousel to stop the play, it is better not use the extension, the normal carousel functions will do it for me

not if you want to use 2 images, 1 for play 1 for stop, that is not possible, 1 image as a play/stop switch is possible

remains one thing, how if i want to use only the progress bar and the slider? i mean regardless to all other functions in the extensions, is it possible?

not possible, all functions are tied to jor_carouselManipulations internal structure, it's timing

[itsme]

hi again

ok by charmap i mean, because it is only text available that i can write "play" "resume" "pause"...etc --- So i thought to go to windows start > run > type there "charmap" and see those text symbols, they usually appear like symbols but they are basically text, so i said might be able to use them instead of the text "play, pause" but didn't work it seems that doesn't support special characters...

well, you said an image for play/pause is possible instead of the text, so where is it? how to use it? do you mean you will create a new version only for me!? although i appreciate it, but also i know will take long time from you side dear

ok for the pausing thing, just look at it from this position, see the standard carousel of wbb, if u click anything like page number or next buttons (even through events via other object), it stops moving... that is logic,, what is the use if user is clicking on a page number to see it or go next purposely to read then the carousel keep playing alone while he is reading page contents right!?!?

with respect to your extension and your work, for my scenario, the normal object wbb standard carousel will do best what i need, i only liked the progress bar and the slider which i really want to know how to add them to the standard carousel without modifying any standard functionality of the carousel, can you just lead me where to see such tutorial or what to do?

thanks in advanced anyway, appreciated your time

Mike

[jordan]

ok by charmap i mean, because it is only text available that i can write "play" "resume" "pause"...etc --- So i thought to go to windows start > run > type there "charmap" and see those text symbols, they usually appear like symbols but they are basically text, so i said might be able to use them instead of the text "play, pause" but didn't work it seems that doesn't support special characters...

ah ok I see, like your creative thinking:)

well, you said an image for play/pause is possible instead of the text, so where is it? how to use it? do you mean you will create a new version only for me!?

tailor made as far as single image control - adding much more code would just make it harder to create a new version if I ever get to it
this is pretty simple – LINK REMOVED

ok for the pausing thing, just look at it from this position, see the standard carousel of wbb, if u click anything like page number or next buttons (even through events via other object), it stops moving... that is logic,, what is the use if user is clicking on a page number to see it or go next purposely to read then the carousel keep playing alone while he is reading page contents right!?!?

hmmm, this a different scenario you sketch here, in any case …
the logic regarding that in jor_carouselManipulation is 4 fold …
01. each event (next/prev/pager/slider/class – int + ext) is bound to a pause on hover (the carousel will not keep running on event hover)
02. an optional progressbar is provided to give the end user a visual feedback of the running state
03. an optional pause/resume in the form of a text object is provided to give the end user the ability to control, as well as a visual feedback
04. an optional pause on hover by class is provided to add additional pause/resume control
If you don't use any of these options then that's a choice, your choice

with respect to your extension and your work, for my scenario, the normal object wbb standard carousel will do best what i need, i only liked the progress bar and the slider which i really want to know how to add them to the standard carousel without modifying any standard functionality of the carousel, can you just lead me where to see such tutorial or what to do?

the jQuery slider and progressbar are standard jQuery components
all information can be found here http://jqueryui.com/ see on the left side (slider + progressbar) – see API documentation

hope this helps ...

[itsme]

this is really perfect dude! thanks a lot
just consider what we said about in your next version, it will add real value to the carousel
regarding adding progress bar and slider bar to my defualt wbb carousel using my modest skills, i pass too hard for me dude

appreciated again

Mike

[jordan]

jor_carouselManipulation update 6

00. note : jor_carouselManipulation rewritten (all fn. comp. w/ WB9 carousel)
01. changed : removed - option effect type + first slide - set in carousel now
02. new : multiple instances (WB9)
03. new : start/stop by external WB objects
04. new : pause/resume objects by class on active pause/resume Text object
05. new : background properties per frame (color/image/repeat/etc)
06. additional : other internal improvements

for full update history, new demo and download see top post

[fredphoesh]

Hello Jordan,

First off, thanks for creating things like this for WB... much appreciated.

I have a carousel on my website but the problem is, when someone clicks on a video to play, the carousel moves on and the video disappears but can be heard still playing! I want a click to play to stop the carousel and heard your extension can do that... but I cannot figure it out.

I added your extension to the same page as the existing carousel (placed to the side away from other elements) I have fiddled with all parameters that mention pause... but cant get it to do anything, and I am guessing I am not doing the basics correctly.

Any chance you could give me a very basic how-to? I have read the PDF that comes with it, and it does not help me.

Thank you!
Mark.

[jordan]

hi fredphoesh,

hope this does it … download here

[bburgess]

Hi Jordan

I had a play with this but could not seem to get much to work

would you have a demo version of this I can load into WB please?

I am a bit lost with all the options, so a demo with a lot of options turned on would be great.

I tend to get lost a lot LOL

Cheers

[jordan]

hi bburgess,

there is already a demo project in the download with many examples
see the jor_carouselManipulation_easystart folder in the download

[bburgess]

Arrrhh I must be blind! I weill go looking and Thank you!!

This looks like a great extension !!