Image preloader from zpGallerific on image page

mironb

Hi
I would like to have java script "image preloading" effect and "fading in" effect on image page. This effect looks beautyfull when I enable option "Use Galleriffic script" in my zpArdoise theme but I want to have it only on image page. I don't like layout of galleriffic.
Any idea where I have to look in image.php and what to add in code ? Please give me something for start.

mironb

Ok I found this by myself
First I had to download script from this page:
http://www.splintered.co.uk/experiments/64/
More informations abut this script you can find on:
http://clagnut.com/sandbox/imagefades/
http://hungred.com/how-to/tutorial-how-does-image-fade-in-when-picture-loaded/

acrylian

You also could have just looked at the jquery cycle plugin the standard slidesshow uses.

onedimensional

Hi acrylian,

I implemented the javascript mentioned by mironb. It works but I lose color box in the process. How do I use the cycle plugin to do this? Can you point me in the right direction?
Meanwhile, I've already found the link to its website:
```http://jquery.malsup.com/cycle/`

Is it as simple as quoting a function like this one in a script?

```$('#fade').cycle();`

Appreciate your feedback.

acrylian

Not sure I understand what the colorbox has to do with this. The cycle plugin is a slider/slideshow plugin and has preloading and several effects among them "fade" in as well.

Is it as simple as quoting a function like this one in a script?

$('#fade').cycle();

That does not much as you need to define what to cycle through. How to use that script is explained on its site you already found. Of course you should also know a bit how jQuery is used: jquery.com

If you like to replace the default image page with its next/prev you have to rework your theme to do so.

onedimensional

My guess is I lose color box (the ability to open up the single image with the overlay) because of javascript conflicts when using mironb's script above. So I'd like to use the cycle plugin, but I can't get it to "wake up"...

Here's what I'm using IAW the demo of how to fade in the first picture from their website:
``$(function() {

$('#slideshow img:first').fadeIn(1000, function() {

$('#slideshow').cycle();

});

});``

I've inserted this code on image.php and changed the id of the image accordingly:

```printCustomSizedImageMaxSpace(getBareImageTitle(), 650, 450, false, 'slideshow')`

So next I'm thinking well I've got to hide it first with css, and then fadeIn (or .'show'), I've tried the following all successfully hiding the image, but it never appears:

``

$('#slideshow').css('opacity','0');

$('#slideshow').css('visibility','hidden');

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

A related question: What is the full file path to the actual plugin?

Thank you again for helping me.</code>

So the complete code in my header section right now looks like this:

<code>`
$(function() {
	$('#slideshow').css('opacity','0');
	$('#slideshow img:first').fadeIn(1000, function() {
        $('#slideshow').cycle();
    });
});
`

onedimensional

Update:

I haven't figured it out yet... but I can make the image "appear" with this:

`` $(function() {

$('#slideshow').css('visibility','hidden');

});

$(window).load(function() {

$('#slideshow').css('visibility','visible')

});

``

All I'm missing now is the "fade in" or ```show('slow')`...

Still eager for your input. thanks

acrylian

You did understand what the cycle script is for? Did you define slides? Without it does nothing naturally… Please review the docs on the cycle site if that is what you are trying to do.

onedimensional

I'm not trying to do slides... Just like mironb, I'm trying to fade in an image rather than the progressive loading (safari), or the pop-in effect of the browsers. From your response to mironb it seemed to suggest the cycle plugin could achieve this?

onedimensional

please visit my site here (image.php) I have reactivated the javascript that achieves the effect but messes up the overlay when you click for the full-size image:

If it is possible, as suggested to mironb, I would like to do replace the javascript with whatever the cycle plugin can do, and that way regain the color box functionality.

onedimensional

I believe I figured it out...

``

/javajs/imageloader.js">

``

This is how I was referencing the script, minus the /script tag. I noticed that when I moved it below the color box script in the head section, my page failed to load at all. So I changed it, and things are working as expected.
I'd still like to know how to use the cycle plug in for this though...

acrylian

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.

onedimensional

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.

acrylian

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.

onedimensional

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.

acrylian

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