Pages (2):    1 2
Member
Member
onedimensional   01-02-2014, 04:14
#11

I believe I figured it out...

``

Administrator
Administrator
acrylian   01-02-2014, 11:25
#12

If you are not trying to do slides cycle is not applicable (I didn't look at mironb's script).. The real question is do you want to reload the image page if you click on next/prev or not or just fade in the image.

For the first you have to rework the theme to bypass the default next/prev by using a slider script (This is basically what the galleriffic script does internally as far as I remember). Also the carousel requires another setup.

If you just want the 2nd then hid the image via CSS intitially and fade it in via jQuery fadeIn(). No need for any image loader in this case. Why load the image via js if it is loaded via plain html already.

Member
Member
onedimensional   01-02-2014, 12:20
#13

Yeah I'm totally with you. I want the second one... (Loading the page and fading in the image) I've tried and tried with JQuery and CSS... The closest I got is with... display:none. Unfortunately it collapses the space until the image fades in. I wanted everything to stay put, so like I mentioned above I tried css visibility, and css opacity, but didn't make any further progress. It's sad cause it seems so straightforward, makes me feel rather silly I'm afraid.

Administrator
Administrator
acrylian   01-02-2014, 12:47
#14

Try "visibility" instead of "display" as that saves the space of the hidden element. Of course only if it set to display: block and has width and/or height. Images have not by default as they are actually inline elements. Or create a wrapper around the image to save the space and just hide the image within.

Member
Member
onedimensional   02-02-2014, 05:11
#15

I got it to work! The first part was assigning a height to the "#image div" that is equal to the height setting for pictures. The second part was vertically centering pictures within the "#image div" so nothing on the page moves when you load the next image, and the third part was the following JQuery in the "head" section:

``

    $(document).ready(function() {

        $('#thephoto').css('display','none');

        $(window).scrollTop(250);              *\-->optional, hashtag anchor works too...

            });

    $(window).load(function() {

        $('#thephoto').fadeIn(1500);

            });

``

The final effect simulates the slideshow to near perfection. Thanks again.

Administrator
Administrator
acrylian   02-02-2014, 09:57
#16

Glad you managed it! "Help to help yourself" is the main motto of this forum :-)

Pages (2):    1 2
  
Powered By MyBB, © 2002-2026 MyBB Group.
Made with by Curves UI.