jor_carouselManipulation 11.0

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.

There are already more than 250 extensions available!
Post Reply
jordan
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

jor_carouselManipulation 11.0

Post by jordan » Sun Jan 29, 2012 7:25 pm

jor_carouselManipulation 11.0

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

Image

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

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 - :cool: - 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
Last edited by jordan on Fri Aug 19, 2016 11:40 am, edited 35 times in total.

User avatar
protectourlands
 
 
Posts: 732
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: jor_carouselManipulation _____ *NEW*

Post by protectourlands » Mon Jan 30, 2012 12:35 am

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!

User avatar
stamjoe
 
 
Posts: 305
Joined: Sat Feb 09, 2008 10:32 am
Location: GREECE

Re: jor_carouselManipulation _____ *NEW*

Post by stamjoe » Mon Jan 30, 2012 1:28 pm

Thanks Man
you provide always useful extensions.
Cheers
Joe

jordan
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_carouselManipulation _____ *NEW*

Post by jordan » Mon Jan 30, 2012 2:20 pm

protectourlands wrote: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
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_carouselManipulation _____ *NEW*

Post by jordan » Mon Jan 30, 2012 2:22 pm

stamjoe wrote: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 . :) .

User avatar
protectourlands
 
 
Posts: 732
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: jor_carouselManipulation _____ *NEW*

Post by protectourlands » Mon Jan 30, 2012 9:47 pm

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
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_carouselManipulation _____ *NEW*

Post by jordan » Tue Jan 31, 2012 12:45 am

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
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_carouselManipulation _____ *NEW*

Post by jordan » Tue Jan 31, 2012 12:48 am

hi protectourlands,

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

User avatar
protectourlands
 
 
Posts: 732
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: jor_carouselManipulation _____ *NEW*

Post by protectourlands » Tue Jan 31, 2012 2:38 am

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

jordan
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_carouselManipulation_update1

Post by jordan » Sat Feb 04, 2012 11:56 pm

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
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_carouselManipulation_update1

Post by jordan » Sun Feb 05, 2012 11:25 pm

tnx debjit, great you like it . 8) .

jordan
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_carouselManipulation_update1

Post by jordan » Fri Mar 16, 2012 4:24 pm

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
 
 
Posts: 27
Joined: Sat Jan 14, 2012 11:29 am

Re: jor_carouselManipulation_update2

Post by Herbert » Fri Mar 16, 2012 5:22 pm

Hi Jordan

thank you so much for this great extension!

Herbert

jordan
 
 
Posts: 846
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_carouselManipulation_update2

Post by jordan » Sat Mar 17, 2012 1:04 am

tnx Herbert great you like!

barrymol
 
 
Posts: 128
Joined: Thu Feb 09, 2012 11:04 am

Re: jor_carouselManipulation_update2

Post by barrymol » Fri Aug 24, 2012 3:45 am

Hello Jordan,

Is it possible to enhance the carousel add-on to allow a mouse hover image for both
the pagination and the previous/next elements? That would give these controls the
same look and feel as all other controls on a page like menu/navigation/jquery
buttons.

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests