Ultimate slideshow in a Lytebox?

[René Damkot]

1) Script Title: Ultimate Fade-in with Lytebox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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, 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]

When you say you tried following instructions found at:

http://www.dynamicdrive.com/forums/s...ad.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]

I replaced "lightbox" with "lytebox", that much I could figure out

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 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: 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 where I tried highslide. 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]

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]

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]

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]

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]

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]

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.

• 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]

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.