Random images and Floatbox

Page: 1

Author Post
MrReaL
Guest
Hi There,

I?m having a bit of trouble trying to get something to work. First i though i did something wrong using Floatbox, since i couldn?t find a simular problem on this forum i started looking elswhere. Well, i did found the problem but can?t find a solution simple due to my lack of programming skills.

Floatbox is just working perfectly, so not directly a Floatbox question.

What i?m trying to fix, having a simple script putting a few random images on the frontpage:

<?php 
// rotate images randomly but w/o dups on same page - format:
// <img src=&#039;rotate.php?i=0&#039;> - rotate image #0 - use &#039;i=1&#039;
// for second, etc
// (c) 2004 David Pankhurst - use freely, but please leave in my credit
$images=array( // list of files to rotate - add as needed
"001.jpg", "002.jpg", "003.jpg", "004.jpg", "005.jpg", "006.jpg", "007.jpg", );
$total=count($images);
$secondsFixed=15; // seconds to keep list the same
$seedValue=(int)(time()/$secondsFixed);
srand($seedValue);
for ($i=0;$i<$total;++$i) // shuffle list &#039;randomly&#039;
{
$r=rand(0,$total-1);
$temp =$images[$i];
$images[$i]=$images[$r];
$images[$r]=$temp;
}
$index=(int)($_GET[&#039;i&#039;]); // image index passed in
$i=$index%$total; // make sure index always in bounds
$file=$images[$i];
header("Location: gfx/thumbs/$file"); // and pass file reference back
?>


This just works perfectly! Second i?m trying to make the thumbnail clickable and using floatbox to view the image. This is where it goes wrong. I copied the original php script and used this one to generate the link to the picture. This also works, thumbail and picture are the same and the picture opens (after clikcing the thumbnail) using floatbox. Unfortunally the image will not resize!!

This is the HTML code


<a rel="floatbox" href=&#039;rotate_p.php?i=0&#039; ><img src=&#039;rotate_t.php?i=0&#039;></a>
<a rel="floatbox" href=&#039;rotate_p.php?i=1&#039; ><img src=&#039;rotate_t.php?i=1&#039;></a>
<a rel="floatbox" href=&#039;rotate_p.php?i=2&#039; ><img src=&#039;rotate_t.php?i=2&#039;></a>
<a rel="floatbox" href=&#039;rotate_p.php?i=3&#039; ><img src=&#039;rotate_t.php?i=3&#039;></a>


I know for a fact it can be done much more easier. I also know that it has to do something with the 'rotate_p.php?i=0', if i adjust this one directly to a picture it will show perfectly, but ofcourse it's not the same image as the thumbnail (well, maybe 1 out of ? times).

Can some help me out or point me to a much more simple solution (but not having to installing a complete image gallery)?

Gr,

Erwin
Administrator
Registered: Aug 2008
Posts: 3382
Help me out here. What is it that doesn't work? You seem to say everything is working except that the image won't resize, but I don't know what you mean by that.

Do you mean that the image does not open up in a floatbox? If so, you may want to read up on the fb.tagAnchors function described in the docs.
MrReaL
Guest
Hi there,

Thanks for the quick respons. What isn't working: due to the PHP script the image won't resize anymore. No matter the configuration in the floatbox.js the image is always shown full size, unless i directly point to a image.

See for an example: http://www.runner-meubelen.nl/

Here you will see 4 images, the upper left has a defined static <a href> to a image while te others use the posted PHP scipt. Because i randomize te images the link to the images has to correspond to the thumbnail.
Administrator
Registered: Aug 2008
Posts: 3382
The href points to a php file which floatbox by default will load as an iframe. Put rev="type:img" on those php anchors to tell floatbox that they are images.

By the way, those are massive images (6144x4096px). You'll get much better responsiveness and smoother animation if you use images that are pre-sized to the size you want displayed.
« Last edit by admin on Tue Mar 24, 2009 5:18 pm. »
MrReaL
Guest
admin wrote
The href points to a php file which floatbox by default will load as an iframe. Put rev="type:img" on those php anchors to tell floatbox that they are images.

By the way, those are massive images (6144x4096px). You'll get much better responsiveness and smoother animation if you use images that are pre-sized to the size you want displayed.


This just works perfectly! Thank you.

The images must be presized, just placed them for test purpose. Can you advise a good multi resize tool? I'm using irfanview but i don't like using this tool, way to complex before getting what i wish.

Maybe you can help me out with the .php script? As you can i use the same rotate.php twice, i figure this can be done reasonably easy within 1 script? Maybe define multiple headers whcih you can adress unique?

Gr,

Erwin
Administrator
Registered: Aug 2008
Posts: 3382
Irfanview works pretty well and really isn't that complex to use. But perhaps a little simpler/quicker is Easy Thumbnails. I think there's lots of others.

I will decline your kind invitation to assist with the php script, thanks.
MrReaL
Guest
Well everything is working perfectly. Thank you very much for this easy to use script.

Maybe a good idea for next releases:
1) Instead of displaying numbers (Index Links) as numbers, show them default as pictures. Maybe 4 or 5 images that scroll foward or backwards whem moving mouse left - right.
2) I set the pictures to max size, there's no option for let's saying it should be 90%.

Great work!!
Administrator
Registered: Aug 2008
Posts: 3382
I'm glad it's working out for you. And I always appreciate suggestions for improvement.

1) I just don't think there's enough room in the floatbox frame to cleanly display multiple thumbnails. I think it's best to stick with the current design of having the thumbnails popup as the Index Link numbers are hovered. But I will consider adding some sort of advanced navigation widget somewhere down the road.

2) You can specify a % of the screen dimensions for the sizing. width:90% height:75% for example. If you wanted a % of the original picture size, it would be better to resize the images as desired, or to specify width and height as absolute pixel values.

Page: 1