jor_ultimslideshow 4.0

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

jor_ultimslideshow 4.0

Post by jordan »

jor_ultimslideshow 4.0

Image

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

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)
Last edited by jordan on Wed Dec 17, 2014 4:29 pm, edited 13 times in total.
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Post by jordan »

download is up 8)
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_ultimslideshow update 2

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

Re: jor_ultimslideshow_update 3

Post by jordan »

jor_ultimslideshow update 3

01. added: pause on hover option

for full update history, demo and download see top post
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_ultimslideshow_update 3

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

Re: jor_ultimslideshow_update 4

Post by 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
User avatar
iamafireman
 
 
Posts: 84
Joined: Mon May 26, 2008 2:41 am
Location: Tennessee

Re: jor_ultimslideshow_update 4

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

Re: jor_ultimslideshow_update 4

Post by 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) ?
User avatar
iamafireman
 
 
Posts: 84
Joined: Mon May 26, 2008 2:41 am
Location: Tennessee

Re: jor_ultimslideshow_update 4

Post by iamafireman »

ok got it. had to rest toolbox.
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: jor_ultimslideshow_update 4

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

Re: jor_ultimslideshow_update 4

Post by 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 ...
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: jor_ultimslideshow_update 4

Post by 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.
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: jor_ultimslideshow_update 4

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

Re: jor_ultimslideshow_update 4

Post by 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 …
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: jor_ultimslideshow_update 4

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

Re: jor_ultimslideshow_update 4

Post by 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>
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: jor_ultimslideshow_update 4

Post by Enupnion »

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

http://www.scifiphotoguys.com/test/
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_ultimslideshow_update 4

Post by jordan »

hmm, what do you mean with there is no difference …
of course there is a difference the images overlap each other :idea: 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) ...
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: jor_ultimslideshow_update 4

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

Re: jor_ultimslideshow_update 4

Post by 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
User avatar
Enupnion
 
 
Posts: 19
Joined: Thu Aug 29, 2013 6:25 am
Contact:

Re: jor_ultimslideshow_update 4

Post by 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. :)
Post Reply