jor_ultimslideshow 4.0

[jordan]

jor_ultimslideshow 4.0



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

jor_ultimslideshow is simply a robust cross browser fade slideshow
some of jor_ultimslideshow features ...

01. multiple instances per page
02. NEW: easing effect for slide fade and caption
03. NEW: randomize image (shuffle)
04. NEW: peekaboo caption
05. NEW: style caption per instance
06. NEW: events oninit and onslide
(see complete update history below)

NOTE PRE jor_ultimslideshow_update 2: delete both extensions (jor_ultimslideshow.xwb + jor_ultimslideshow_setup.xwb) from the WB extension folder!

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

DEMO jor_ultimslideshow: visit jorextensions.com
DOWNLOAD: jor_ultimslideshow

Builder: jordan (6j6)
Additional code: jordan (6j6)
Code: dynamicdrive.com
EB version: 4.1.0
WB version: 8+
jQuery lib: 1.7.2/1.9.1/1.11.1
W3C valid: Html, Xhtml

HISTORY:
-#-#-#- update 1: -#-#-#- 24/dec/09
01. changed: compatible with WB6.5
02. enhanced: HTML W3C valid

-#-#-#- update 2: -#-#-#- 20/jan/13
01. changed: internal WB jQuery
02. changed: fadeslideshow.js 2.4 + minified
03. changed: jor_ultimslideshow consists of 1 extension now - removed global setup extension
04. changed: caption styling per instance
05. new: easing effect on slide fade and caption
06. new: randomize image option (shuffle)
07. new: caption peekaboo option
08. new: events oninit and onslide
09. changed: dimension set by extension
10. added: background color option

-#-#-#- update 3: -#-#-#- 10/feb/13
01. added: pause on hover option

-#-#-#- update 4: -#-#-#- 10/mar/13
01. changed: removed image close option (auto detect last slide)

[jordan]

download is up

[jordan]

jor_ultimslideshow update 2

01. changed: internal WB jQuery
02. changed: fadeslideshow.js 2.4 + minified
03. changed: jor_ultimslideshow consists of 1 extension now - removed global setup extension
04. changed: caption styling per instance
05. new: easing effect on slide fade and caption
06. new: randomize image option (shuffle)
07. new: caption peekaboo option
08. new: events oninit and onslide
09. changed: dimension set by extension
10. added: background color option

for full update history, demo and download see top post

[jordan]

jor_ultimslideshow update 3

01. added: pause on hover option

for full update history, demo and download see top post

[jordan]

hi zoteW7,

jor_ultimslideshow is very simple to set up, like any slideshow
you add your images to the [ Data – Add Slideshow ] property, that's all …

two points of notice:
01. on the last entered image the property [ Important Close } needs to be set to Blank – this is Important !
02. the dimension of the slider should be at least equal to the largest image used

all other properties are optional to setup as you require
you can also find information on the properties in the - jor_ultimslideshow.pdf

===

if you have any problem setting up jor_ultimslideshow please tell me which steps you took and what did not work ?
then I can help you from there on, gladly will ...

[jordan]

jor_ultimslideshow update 4

simplified setup ...
01. changed: removed image close option (auto detect last slide)

for full update history, demo and download see top post

[iamafireman]

I installed the extension, but it doesnot show in my tool box. I only have about 25 extensions installed and I am using the latest version of wwb. Any ideas?

[jordan]

hello iamafireman,

it does show here, latest build also, did you try …

01. install through the extension manager ?
02. reset your toolbox (toolbox > context-menu > reset toolbox) ?

[iamafireman]

ok got it. had to rest toolbox.

[Enupnion]

Love this simple to use extension! Thank you.

I have a request: would it be possible to add a transparent background as well? I don't want a solid color.

Thanks in advance!

[jordan]

hello Enupnion,

how do you want to use it transparent?, transparent as in to use with ie. .png images ?
that is not possible the images would overlap each other as they fadout
could you post a live example or explain exactly how you want to use it ...

[Enupnion]

I am currently using it with PNG images and they are not overlapping each other. I have a set of testimonials about our photo work on my page and am using Ultimslideshow to fade from one testimonial to another at the bottom of the home page.

The new version of the site is not yet completed, so I do not have the example up. But I will publish the home page and put it up later today so you can look at it. I'll come back here and let you know when I do.

Thanks.

[Enupnion]

Here's a link to the index page using Ultimslideshow (it's toward the bottom):

http://www.scifiphotoguys.com/test/

As you can see, the PNG files fade fine with no overlap. And while setting the background to black is okay, I would prefer, if possible, to have the background transparent so the faded horizontal lines could show through.

Thanks.

[jordan]

hi Enupnion,

with overlapping I mean the .png images themself would overlap each other if they are all transparent
the previous image would still show while the current image fades in, both would show, current and previous at the same time:(
it is possible but I would have to change some code, you would still see an overlap of fadin, fadeout tho
you can also do this by using the jor_ultimslideshow events, if you want to use those, I can tell you how to?
or, if you can wait a little I will add it to the extension, over the weekend prob.

let me know …

[Enupnion]

I can wait. Thanks.

However, I am confused. The images are currently PNG with transparent areas (where the text is not). They currently do not overlap at all even when fading from one to the next.

[jordan]

yes, the image is transparent, but it's background-color attribute is not
add this between the <HEAD> of your page to see what happens if it is transparent …

<script type="text/javascript">
$(document).ready(function() {
$('.gallerylayer').css('background-color','transparent');
});
</script>

[Enupnion]

I added the code just before the /head on the page. I see no difference.

http://www.scifiphotoguys.com/test/

[jordan]

hmm, what do you mean with there is no difference …
of course there is a difference the images overlap each other you can't see a correct fadein fadeout occurring?!
that happens when the background-color is set to transparent (that is what that code shows)
so, the background-color can not just be set to transparent, but the code has to be changed for that
the code I gave was in response to your confusion (not a solution) ...

[Enupnion]

Sorry. When I first viewed the page (before my last post), I did not see the difference. Now I do. But what I do not understand is the background color does not appear to be transparent. I can still see the black rectangle in the back behind everything ... the faded horizontal stripes do not show through.

[jordan]

that is because the images are placed in a wrapper which has it own background-color
change the earlier script to this …

<script type="text/javascript">
$(document).ready(function() {
$('#fadeshow1, .gallerylayer').css('background-color','transparent');
});
</script>

this will make all transparent, with still the same problem
I did not give this because I wanted to show that the background-color itself is not the problem
it's the way the script creates the transition, it fades in the foreground without fading out the background
but even if I change this you will always have a small overlap on transparent images
because the effect is a fade transition, you can not have a seamless transition with fade
the only way to get a seamless transition on transparent images would be to use an effect like morph
that doesn't exist in HTML you would need flash or canvas to do such things

[Enupnion]

Thanks. I appreciate all the time you have taken to explain this to me. It helps.

I will either use the text with the same background as the website or 'cap' the ends (graphics) to make it look like the solid black background is supposed to be there ... a part of the design.

Thanks again. Your extension rocks, by the way.