Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Ultimate slideshow in a Lytebox?

  1. #1
    Join Date
    Oct 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate slideshow in a Lytebox?

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by René Damkot; 10-05-2009 at 06:38 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.
    Last edited by René Damkot; 10-06-2009 at 01:44 PM. Reason: googled again ;)

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Oct 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Oct 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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:
    HTML Code:
    <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 )

    HTML Code:
    	<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)
      HTML Code:
      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.
    Last edited by René Damkot; 10-08-2009 at 05:53 PM.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •