PDA

View Full Version : Ultimate slideshow in a Lytebox?



René Damkot
10-05-2009, 03:44 PM
1) Script Title: Ultimate Fade-in with Lytebox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm and http://www.dolem.com/lytebox/

3) Describe problem: Trying to get the Ultimate Fade-in script to work in a Lytebox. Tried following instructions here (http://www.dynamicdrive.com/forums/showthread.php?t=12115), but since that is about the old version of the script, I'm stuck.

My knowledge of js is less than my knowledge of HTML, which is not huge.

Currently I have images online like this:
http://www.damkot.com/pa.html

What I'd like is to add an "Editing" section, where I'd want to have a slideshow consisting of 2 or 3 images for each image in a Lyteframe.

I'd appreciate some help :)

jscheuer1
10-05-2009, 04:18 PM
When you say you tried following instructions found at:

http://www.dynamicdrive.com/forums/showthread.php?t=12115

Those where for lightbox, not lytebox - and for using lightbox to show an enlarged image for each image within the slide show.

You appear to want to launch a slide show in lytebox for each thumbnail image that appears on a page - do I have that much right or is there more/different things you want to do?

René Damkot
10-05-2009, 06:22 PM
I replaced "lightbox" with "lytebox", that much I could figure out :D

Ah. So that page was "the other way around?": To open a "Lightboxed" image of one of the "Ultimate fade-ed thumbnails" so to speak? In that case it figures why I didn't understand the explanation in the other thread ;)

Yeah, I'm trying to click on a "static" thumbnail (jpg image like in the PA gallery I linked) and then open a Lytebox window with two to three images fading over.

I've tried using Smoothgallery (http://smoothgallery.jondesign.net/) in a Lyteframe which I got to work, but has the (big) drawback that a Lyteframe can't be auto-scaled down to fit the screen if needed.

Example of that experiment here (http://www.damkot.com/editingV2.html): First image is (test purposes) resized to 300px max by Smoothgallery and put in a lyteframe of 500px, rest of the images are at full size (about 1024 px).

The above page is doing what I want it to do, except that I can't get it to auto resize for smaller screens.
Also, I'd need to set image/window size manually in that, for both the lyteframe (in editingV2.html) and in the smoothgallery resizing (in edit1a.html). Which isn't exactly user friendly for exchanging images later...
I managed to get rid of the need to also set the size in the Smoothgallery css by removing the 4 lines for .jdGallery in that .css

Finally, there's this page (http://www.damkot.com/editing.html) where I tried highslide (http://highslide.com/). This does do what I want, but looks less nice, has a slightly worse transition, and is very unstable (if you click outside an image in mid-transition, you end up with a white page, and cannot get out unless you close the browser window)

In the mis-reading of the forumpost here I thought that Ultimate Fade-in would allow me to do what I want, and use Lytebox instead of lyteframe to allow auto-resizing.

Sorry for any confusion. Still hope you have some solution.

jscheuer1
10-06-2009, 02:56 AM
U-Fade, as far as I know doesn't resize images or the slide show gallery itself to fit the window/frame it is in. If it could be made to do so, would this solve your problem, or are there other issues involved in getting U-Fade into a lytebox window? I mean, the current version of lytebox can launch a page in an iframe within its modal window, so that part should all be pretty straightforward, right?

René Damkot
10-06-2009, 01:18 PM
U-Fade, as far as I know doesn't resize images or the slide show gallery itself to fit the window/frame it is in. If it could be made to do so, would this solve your problem, or are there other issues involved in getting U-Fade into a lytebox window? I mean, the current version of lytebox can launch a page in an iframe within its modal window, so that part should all be pretty straightforward, right?

My line of thinking was that it might be easiest using Lytebox to do the resizing, U-fade to do the transitions between images.

I think it would be pretty easy to get U-Fade to work in a Lyteframe (as I did with Smoothgallery), but with the same drawback: No auto-resizing to the browser window. And smoothgallery can resize, but needs to be given a size in pixels as well. So no way to resize to a given Lyteframe size.

Don't know about iFrames, but I'll look into that. If it's possible to have an iFrame automatically take the maximum available size to fit the screen, then that might be an option. From what I found through google, it's possible to adjust an iFrame to fit the content, but not to fit the screen?
Edit: Googled again, seems both are possible. Off to experiment ;)

As I said, Highslide does what I want, but the transition and stability are not okay IMO. Otherwise I'd just pay for it and be done with it: I'm fairly certain that I can alter the "look" to suit what I like.

jscheuer1
10-07-2009, 03:38 PM
Well, when you launch a page (as opposed to a single image) in lytebox, it is done via an iframe. I'm not clear on how lytebox determines the size for that display. However, simply resizing that (lytebox's displayed iframe) would have no effect upon the size of U-Fade (which should I imagine for this be on a separate page) - all this is - as far as I know. If you know different, please tell me.

The bottom line (as I see it) is that modification would need to be made to U-Fade for it to be able to resize, perhaps also to lytebox to have it to be able to resize its iframe display.

Lightwindow is another sort of script like lytebox. Lightwindow can display a page and can resize in certain cases. I'm not sure if this would include what is required here. Even so, that would still leave the matter of getting U-Fade to resize.

René Damkot
10-07-2009, 04:55 PM
Yep.

I got U-fade to work in a lyteframe pretty straightforward, and it runs about as good as smoothgallery, which is nice. I still have to manually set a "maximum size" though, and (let it) resize the image somehow.

Found a script to get an iFrame to resize to a browser window. Maybe I can use that somehow to set the size for both Lyteframe and image in it...

Thanks!

jscheuer1
10-08-2009, 12:33 AM
I think you may be letting me off too easy. :) Not that I mind, there are lots of folks who need help. But if you are having trouble with this, let me know - you can continue this thread with any issues you encounter with this project.

René Damkot
10-08-2009, 04:48 PM
Since you ask it ;)

I've gotten U-fade to accept a "myWidth" and "myHight" from a java script in the html opened in the lyteframe. That way I use the Lytframe sizes as maximum for U-fade. (At least: I think it works: It centers when opened in a new tab)

However I can't get same scrip to use those values as size for the Lyteframe. Those sizes I set here:

<a href="smoothgallery/edit1acopy.html" rel="lyteframe[fadeshow2]"rev="width: 700; height: 900; scrolling:no">test<img src="images/editing/thumb/image01.jpg" height="120" alt="NL" class="float-left" /></a></a>

If I remove "px" originally there, it still works, but if I put a variable (myHight) there, it won't work. I also couldn't get it to work in the lytebox.js. I think that's my biggest problem right now.

Likewise, I haven't been able to get those "myWidth" and "myHeight" values to be accepted in the resizer.php used by Smoothgallery. But I might be able to use a similar code in php then what's used in js: (from somewhere on the web ;))


<script type="text/javascript">
var myWidth=window.innerWidth

{
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
}

</script>

Result of a whole lot of fumbling around more or less in the dark: here (http://www.damkot.com/editingV3.html).


First "test" image: plain jpg opening in a Lytebox, resized to the screen (to test I didn't screw up Lytebox ;))
Second "test" image: U-fade, opening in a fixed-size Lyteframe, using the Lyteframe size as width and height. (with a little offset I think)

dimensions: [myWidth, myHeight], //width/height of gallery in pixels.
Third test image: Smoothgallery, opening in a fixed size Lyteframe, resizing using resizer.php with manually set values.
Fourth image: Smoothgallery, opening in a "Default sized" lyteframe (400px square). No resizing.

jscheuer1
10-08-2009, 05:54 PM
Those values are script variables. The rev attribute is strictly text. You could use a onmouseover event (which can contain javascript) to set the rev attribute using your variables. But that will only be effective if the rev attribute is checked each time the link is clicked.

René Damkot
12-27-2009, 06:09 PM
A quick update.

I got it to work :D

I use floatbox (http://randomous.com/floatbox/home) now; it has an option to resize to "max" (i.e. browser window) for html content.

Set a cookie to get the window size into the .php file.

http://www.damkot.com/smoothgallery/edit1resize.html


<script language="javascript">

writeCookie();

function writeCookie()
{
var today = new Date();
var the_date = new Date("December 31, 2099");
var the_cookie_date = the_date.toGMTString();
var the_cookie = "ur_width=" + window.innerWidth ;
var the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie=the_cookie
var the_cookie = "ur_height=" + window.innerHeight;
var the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie=the_cookie
}

</script>


And in the .php file I changed the first bit of the script to:



$max_height = 1000;
$max_width = 2000;
if (isset($_GET["imgfile"]))
{
if (function_exists(get_magic_quotes_gpc) && get_magic_quotes_gpc())
{
$image = stripslashes( $_GET["imgfile"] );
} else $image = $_GET["imgfile"];
if (isset($_COOKIE["ur_width"])) { if($_COOKIE["ur_width"] < 2000) $max_width = $HTTP_COOKIE_VARS["ur_width"]; }
if (isset($_COOKIE["ur_height"])) { if($_COOKIE["ur_height"] < 1000) $max_height = $HTTP_COOKIE_VARS["ur_height"]; }

//delete the cookie
setcookie("ur_width",'',time()-3600);
setcookie("ur_height",'',time()-3600);


Different way to do it, but seems to work (At least on all browsers I use)

A friend tells me IE8 doesn't work, No idea why?

Thanks for the help :)

René Damkot
01-09-2010, 03:06 PM
http://www.damkot.com/editing.html

This is the page.
In IE, if a thumbnail is clicked, a 'lightbox' opens, but nothing is displayed: Completely white...

Works ok in Safari and FF (both mac and PC)

jscheuer1
01-09-2010, 04:35 PM
There is no window.innerHeight or Width in any version of IE. To make matters worse, the equivalent properties can vary depending upon the rendering mode of your document as set by its DOCTYPE as interpreted by a given version of IE.

However, from IE 6 on, with a valid URL DOCTYPE like you have on your edit page, it will always be:

document.documentElement.clientHeight
document.documentElement.clientWidth

And though this may or may not also be a problem, you should only declare a variable once in any given scope. And this is not a problem, but you are not using 'today'. So, in your function you could do:


function writeCookie(){
var the_date = new Date("December 31, 2099");
var the_cookie_date = the_date.toGMTString();
var the_cookie = "ur_width=" + (window.innerWidth || document.documentElement.clientWidth);
the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie=the_cookie;
the_cookie = "ur_height=" + (window.innerHeight || document.documentElement.clientHeight);
the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie=the_cookie;
}

Note: These dimensions might not be available in IE until after the page has drawn, so should be checked at the end of the document, or onload.

There could still be other problems in IE.

René Damkot
01-10-2010, 07:32 PM
There could still be other problems in IE.

Well, there were some other problems, such as the html not validating because of the && in the javescript I posted a few posts back.

So I've tried a number of things, none of which worked well :p

Finally, I replaced the script with these two lines, which seem to work.


<script type="text/javascript">
var myWidth=(window.innerWidth || document.documentElement.clientWidth);
var myHeight=(window.innerHeight || document.documentElement.clientHeight);
</script>


However, IE still gave an error.

Apparently what caused it was an error in the optimised jquery script :eek:.
Only IE had issues with it (line 12, position 12949 or line 13, position 14949 according to a few friends with IE), and linking to http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js instead fixed it in the end.

It validates fine (except for two lines in the CSS) and reportedly it works on IE as well now.

http://damkot.com/editing.html

Thanks for the help :)

jscheuer1
01-11-2010, 03:15 AM
Things like && not validating in a script are a little misleading. They are of course invalid HTML. But (if used properly) they are valid javascript. There are two basic approaches to validating code like that:


Use the appropriate comment tags to let the browser and validator know that the script is not HTML code.

Make the script external (the preferred method).


As for the rest of all that, I'll take your word for it.