jor_carouselMeetsJssor 3.1__**UPDATE**__3.2

[jordan]

jor_carouselMeetsJssor 3.2

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



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

jor_carouselMeetsJssor uses the WB Carousel component as a container for the Jssor Slider

jor_carouselMeetsJssor offers the following Jssor functions ...

- Slideshow with 151 transitions - (+ create unlimited variations with custom properties - row/column/zoom/rotate/duration - if appl.)
- Arrow Navigation - position and style by WB Carousel
- Pager Navigation - 17 skins - position by WB Carousel - (+ option lanes)
- Thumbnail Navigation - position left/right/top/bottom
- Caption transition with 161 transitions - animate any object inside the WB Carousel in and out - (+in/out) of position
--- (+ create unlimited variations with (advanced) custom properties - x/y/rotate/zoom/opacity - in/out)

jor_carouselMeetsJssor also offers the following exclusive options ...

- WB Carousel as container - (content, arrow and pager positioning)
- Stop/Play autoplay button by WB Image or WB Text object
- Slide Counter by WB Text object
- Visual timer or percentage display by WB jQuery Progressbar or WB Text object - (+ single style the jQuery Progressbar)
- Caption transition - target object by ID or CLASS
- Pager 1 skin - freely style with border-width/style/color, background-color (def/hov/act) + enable numbers etc
- Thumbnails - freely style with border-width/style/color (def/hov/act) + opacity + custom pointer etc
- Auto Switch - only engage autoplay if the slider is in view - (vertical axis)
- "RWD-pseudo-solutions" - backdrop mode by WB Layer (=neutralize occupied space on scale) + option chase background etc
- Many other ie.
--- correct auto centering thumbnails, pagers and arrow navigation - (scaled/non-scaled)
--- correct auto centering thumbnail pointer
--- most pager skins soft re-designed
--- multiple instances per page
--- etc

jor_carouselMeetsJssor is a super cool extension that brings many functions of the amazing Jssor slider to Webbuilder !

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

AND OF COURSE - OH MAMA - - IT'S-STILL-FREE!

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

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

DEMO jor_carouselMeetsJssor: visit jorextensions.com
DOWNLOAD: jor_carouselMeetsJssor
-------- see the - jor_carouselMeetsJssor_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.7.2+
W3C valid: Html, Xhtml
Original Code: jssor.com
License: released under the MIT and GPL licenses

HISTORY:
-#-#-#- version 2: -#-#-#- 14/feb/16
01. new: WB11 - support carousel float mode
02. new: WB11 - support carousel background image can set Jssor slideshow image
03. fix: WB11 - support altered bookmark - (=property mark trace)
04. additional: WB11 - added WB11 easystart project

-#-#-#- version 3: -#-#-#- 17/jul/16
01. fix: slideshow - option hide vs carousel background image fix
02. fix/enhanced: window alert - WB11 responsive mode
03. advanced: advanced: allow Jssor Methods/Events
04. enh: compiled with EB 5.3.2
05. additional: updated WB11 easystart project - (=responsive note)

-#-#-#- version 3.1: -#-#-#- 08/jan/17
01. fix/enhanced: backdrop - adjust top position - dynamic on click - (float/grid)

-#-#-#- version 3.2: -#-#-#- 06/jun/17
01. fix/enhanced: window alert - WB12 fullpage mode
02. new: new option: pager 1 - border-radius
03. new: new option: slider counter - display total count
03. new-blocks: WB12 BLOCKS (x4) - basic + basic external + float + float external

- for full update history see .pdf in download

[jordan]

jor_carouselMeetsJssor SOON!

Whoaa another one done ... uuhh almost done . ... jor_carouselMeetsJssor
jor_carouselMeetsJssor uses the WB Carousel component as a container for the Jssor Slider

see a preview in the new cool demo on jorextensions.com !

[BaconFries]

Looking "GREAT" jordan may I add as always.. keep up your "GREAT" contribution to the forum.

[jordan]

Heya how-i is batman - always great to hear from you, thanks for your words Calum - TNX! . .

ps:
hope 2015 was well for you, and in short advance, hope 2016 will be a SUPER year for you and you loved ones!

[tommy888]

Supurb Extention Jor!
Great Work Thanks.
Looking' forward to the first download available.

Seasonal Greatings from Poland!
Merry Christmas and Happy New Year to You, Your Family and Friends.
All the best,
Tomasz

[BaconFries]

@jordan well still alive and kicking Wishing I was still able to get extensions made bu dont have that will or the patience anymore that I use to have. Right you carry on doing what your "Great" at and have fantastic Christmas.

[jordan]

Supurb Extention Jor!
Great Work Thanks.
Looking' forward to the first download available.

Seasonal Greatings from Poland!
Merry Christmas and Happy New Year to You, Your Family and Friends.
All the best,
Tomasz

great you like tommy888, working as hard as I can to finish it, still got some work to do tho

also the best of days and a healthy 2016 to you and you hold dear! . .

[jordan]

still alive and kicking

that's all I wanna hear Calum . . gu-goOd!

[jordan]

jor_carouselMeetsJssor 1.0 RELEASED

nice one to play with:) - enjoy!


======
A BEST OF 2016 WISHES TO PABLO AND FAMILY AND ALL THE WB COMMUNITY! . .

[BaconFries]

Thx for the release jordan. I will be downloading when back at PC and I am sure it will be 'Great' as always

[jordan]

Thx for the release jordan. I will be downloading when back at PC and I am sure it will be 'Great' as always

. .

[jordan]

hello pollillo5

I can't see what you have done, so I don't know ?
have you read the jor_CMJ pdf manual in the download - (First Setup - Slideshow) ?
have you tried the jor_CMJ easystart project in the download, does jor_CMJ work there ?

===========
WB11 NOTE!
if your using WB11 note that I have an update release very soon, it fixes/adds some WB11 compatibility
- (ie. - add jor_CMJ Slideshow image by WB11 Carousel background image)

[jordan]

jor_carouselMeetsJssor 2.0 - UPDATE

jor_carouselMeetsJssor 2.0 fixes/adds compatibility with WB11

01. new: WB11 - support carousel float mode
02. new: WB11 - support carousel background image can set Jssor slideshow image
03. fix: WB11 - support altered bookmark - (=property mark trace)
04. addit: WB11 - added WB11 easystart project

for full update history, demo and download see top post

[jordan]

jor_carouselMeetsJssor 3.0 - UPDATE

jor_carouselMeetsJssor 3.0 fixes and adds some functions

01. fix: slideshow - option hide vs carousel background image fix
02. fix/enh: window alert - WB11 responsive mode
03. adv: advanced: allow Jssor Methods/Events
04. enh: compiled with EB 5.3.2
05. addit: updated WB11 easystart project - (=responsive note)

for full update history, demo and download see top post

[BaconFries]

Nice update Jordan.

[jordan]

Nice update Jordan.

. .

[mariojazz]

Hi.
First time I try your extension,and just I do not think I even wonder extension.

Thanks Jordan

http://giphy.com/gifs/HJ8NsNtn9VswE/html5

[jordan]

Hi.
First time I try your extension,and just I do not think I even wonder extension.

Thanks Jordan

http://giphy.com/gifs/HJ8NsNtn9VswE/html5

Argh ye scurvy pirate:) - glad you like mariojazz

[mindentezzel]

Dear Jordan,

many thanks for your great extensions. I love them.

Is there a way to add sound effect to the carousel? I think, there must be many ways, but I cannot write programs in html, Java etc.


I'd like to add sound when a picture comes in and when it goes out. How is it possible?
Please be very "user-friendly" , since I am not a guru


Thanks,
T.

[jordan]

Is there a way to add sound effect to the carousel? I think, there must be many ways, but I cannot write programs in html, Java etc.

hi mindentezzel,

great to hear you like my extensions:)

nope, sound effects is not part of the jssor slider, it takes custom code to achieve that
I can not help with custom coding, sorry:(
I can give you a head start on how to, but you have to take it from there to your own requirements
quick example - see here
I do not know if this holds up cross-browser (doubt it) ? - test for yourself

user friendly advise:)
personally I would recommend not to use sound and animation at the same time
especially if your not familiar with interactive media control, javascript, etc

but if this is what you want, then I can give you a quick how to ...

[mindentezzel]

Dear Jordan,
thank you for the fast example. It's great! What else!

Can you please post the wbs file just to see how it works. If I see one solution, I am able to use and/or modify this.
I do understand, if you wouldn't like to publish it for everyone, since it is not as perfect as your other great extensions. Knowing this, may I give you my email address, would you send the wbs to me?

[jordan]

hi mindentezzel,

I think it's better to do it step by step to understand ... (mind the color notes)

STEP 1:
- add a WB carousel
- add jor_carouselMeetsJssor
- (or open jor_carouselMeetsJssor_easystart in the download, use any of the examples (IMPORTANT: match id in code))

STEP 2:
- add a HTML5 audio player to your project - add an audio clip
- set in the audio player - Autoplay to off
- set in the audio player - Show controls to off

STEP 3:
between page <HEAD> add the following ...

=============================================================================
<script>
$(function() {
//--- IMPORTANT: jor_cmj_pc1 = match carousel id --- see jor_carouselMeetsJssor pdf (methods and event)
jorcmj_pc1 = function(slideIndex,progress,progressBegin,idleBegin,idleEnd,progressEnd) {

var slideSt = progress<40;

// --- REPEAT THIS FOR EACH SLIDE/CLIP - copy/paste - (change index + media player)
if (slideIndex==1) {
if (slideSt) {
$('#MediaPlayer1')[0].play();
};
}
else if (slideSt) {
$('#MediaPlayer1')[0].pause();
$('#MediaPlayer1')[0].currentTime=0;
};
// --- REPEAT THIS FOR EACH SLIDE/CLIP - copy/paste - (change index + media player)

};
});
</script>
=============================================================================

STEP 4:
- repeat step 2 for each media clip required
- repeat "REPEAT" code for each slide/clip (copy/paste)


that should do, hope this helps!

[mindentezzel]

Thank you very much for your help and valuable time you spent writing this lesson

Works excellent!

[jordan]

jor_carouselMeetsJssor 3.1 - UPDATE

01. fix/enhanced: backdrop - adjust top position - dynamic on click - (float/grid)

for full update history, demo and download see top post

[jordan]

jor_carouselMeetsJssor 3.2 - UPDATE

01. fix/enhanced: window alert - WB12 fullpage mode
02. new: new option: pager 1 - border-radius
03. new: new option: slider counter - display total count
03. new-blocks: WB12 BLOCKS (x4) - basic + basic external + float + float external

for full update history, demo and download see top post