fancybox integration

[i.alex]

This mod add smaller width and height atributes to the image, thus resizing it, and then load the full image in fancybox if the user click on it.

Attention: This mod doesn't resize the image on your server.

This is my first mod so go easy on me...


First Step:
Open /includes/functions.php.
Before the "?>" sign add:

Code: [Select]

function imag_size($width_orig,$height_orig){
  $width = 600;//max width to resize the image
  $height = 650;//max height to resize the image
if($width<$width_orig || $height<$height_orig){
  $ratio_orig = $width_orig/$height_orig;

if ($width/$height > $ratio_orig) {
  $width = $height*$ratio_orig;
} else {
       $height = $width/$ratio_orig;
}
return 'width="'.ceil($width).'" height="'.ceil($height).'"';}
}

Step two:
search for:

Code: [Select]

"height" => $height,and add below:

Code: [Select]

"imag_size" => imag_size($width,$height),
Step three:
Open /templates/<your_template>/header.html
Before {if has_rss} add:

Code: [Select]

<link rel="stylesheet" href="{template_url}/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="{template_url}/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("a#imagine").fancybox({
'autoScale':false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>Step four:
Open /templates/<your_template>/details.html
Replace

Code: [Select]

{image}With:

Code: [Select]

<a href="./data/media/{cat_id}/{thumbnail_file_name}" id="imagine" title="{image_name}"><img src="./data/media/{cat_id}/{thumbnail_file_name}" {imag_size} /></a>
Step five:
Download Fancybox from: fancybox.net

Final step:
Upload the folder fancybox from the archive to your template folder.
Done...

Check a demo at: foto.xero.ro

If you have any questions or problems reply here

[Warrior]

Step four:
Open /templates/<your_template>/details.html
Replace

Code: [Select]

{image}With:

Code: [Select]

<a href="./data/media/{cat_id}/{thumbnail_file_name}" id="imagine" title="{image_name}"><img src="./data/media/{cat_id}/{thumbnail_file_name}" {imag_size} /></a>

Wouldn't that work better in the /templates/<your_template>/media/<your file type.html> better?

Not all files will be images. Some will be videos or music and may have a different script to view them, ala media players.

EDIT:

Also, you might not need to do all of that if you already use this. IF you have that already MODDED into your 4Images, then this is all you need to do:

1. Install fancybox (follow their instructions)

1a. When they tell you to place the script info above the /head tag, go to your /templates/<your_template>/header.html and do it there.

2 Open /templates/<your_template>/media/<your file type.html>

FIND, depending on what set-up you have to view the image:

Code: [Select]

<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
ADD or REPLACE with this-

Code: [Select]

<a id="single_image" href="./data/media/{cat_id}/big/{image_file_name}" title="{image_name}"><img src="{media_src}" border="0" alt="{image_name}"{width_height} /></a>
Yup. It works like that...

CLICK HERE

[sathishIPL]

Hi All,

I am trying to resize an image with aspect ration by using the below function .

Which was posted in Fancybox Integration

http://www.4homepages.de/forum/index.php?topic=29394.0

function imag_size($width_orig,$height_orig){
  $width = 600;//max width to resize the image
  $height = 650;//max height to resize the image

if($width<$width_orig || $height<$height_orig){

   $ratio_orig = $width_orig/$height_orig;

if ($width/$height > $ratio_orig) {

   $width = $height*$ratio_orig;

} else {
       $height = $width/$ratio_orig;

}

return 'width="'.ceil($width).'" height="'.ceil($height).'"';}
}


The issue i am facing is , some times the image is not re sized and it is displaying the original image.

when i checked the source code of the page, there was no width and height specified in the image.

I have cleared the cache , session and everything.

Can anyone know have faced the problem before?

I am tired of finding the root cause.

Thank You...!

Br,
satz