Author Topic: [ADD-ON] Image Zoomer (Read 67132 times)

sigma. · « **on:** May 15, 2006, 05:01:54 PM »

Im not that PHP or HTML savy but i know some of you are and Im hoping some of you might be able to help with this little mod/addon Im thinking about.

Image Zoomer is a free Javascript code that can be found here
http://valid.tjp.hu/zoom2/index_en.html

What I would like to do is add it as an option for some images. Maybe a button that turns it on and off.
Any ideas on how this can be done?

sigma. · « **Reply #1 on:** May 16, 2006, 04:34:52 PM »

Quote

You may also find the tjpzoom tool useful if you you have a low resolution and a high resolution version of the same picture and it's only the lowres one that fits in your page but you want to show the little details of the highres one.

I can see how that would be usefull. I have a setup on my site that requires visitors to register in order to download high resolution versions of the photo they are seeing. This would be a nice feature to give them a look at some of the details of the high res. It might also encourage them to register.

mawenzi · « **Reply #2 on:** May 16, 2006, 05:43:00 PM »

Zoom for jpg-images :

use this jpg.html in /templates/<your_template>/media ...

Code: [Select]

<!-- Template file for JPG Files -->
<head>
<script type="text/javascript" src="http://valid.tjp.hu/zoom2/tjpzoom.js"></script>
</head>
<div style="float:left" onmouseover="zoom_on(event,{width},{height},'{media_src}');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="{media_src}" alt="{image_name}" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>

... it works ...

sigma. · « **Reply #3 on:** May 16, 2006, 05:45:29 PM »

Thats too funny. I was browsing your website and all of a sudden the image i was looking at had the zoom feature. Guess you were testing right at that moment!.

Cool, i'll give it a try but Im wondering if theres a way to implement a button to turn it on and off. Or have it specificly for opne image, not the entire site.

sigma. · « **Reply #4 on:** May 16, 2006, 05:55:17 PM »

Here is the code that they provide for showing high res version on your low res image

Quote

<div style="float:left" onmouseover="zoom_on(event,580,580,'http://valid.tjp.hu/zoom/collage.jpg', 'http://valid.tjp.hu/zoom/collage_2.jpg');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="http://valid.tjp.hu/zoom/collage.jpg" alt="tjpzoom picture title" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>

Now how would you be able to convert this

Quote

(event,580,580,'http://valid.tjp.hu/zoom/collage.jpg', 'http://valid.tjp.hu/zoom/collage_2.jpg')

Into a more 4images friendly setup pointing to images specific to their image ID. Basicly I would like it to zoom the high resolution version for the image the user is viewing at that time.

mawenzi · « **Reply #5 on:** May 16, 2006, 06:01:37 PM »

Quote from: sigma. on May 16, 2006, 05:45:29 PM

Guess you were testing right at that moment!.

but only at that moment ...

...
I use another zoom-tool for specific images on my website ...

sigma. · « **Reply #6 on:** May 16, 2006, 06:06:21 PM »

Interesting. but how customizable is it? im not crazy about the tool bar and overall feel of the setup but it is cool. Can you change the look of the buttons and the location of the thumbnail? looks like your using flash for this. hmm, maybe i should look into that too.

mawenzi · « **Reply #7 on:** May 16, 2006, 06:13:30 PM »

Quote from: sigma. on May 16, 2006, 06:06:21 PM

Can you change the look of the buttons and the location of the thumbnail?

1. for the moment : with the button on the right top ...
2. generally : in the code of the media template ...

sigma. · « **Reply #8 on:** May 16, 2006, 06:19:40 PM »

I guess im looking for something a bit more simple. Do you think this javascript will be too dificult to implement?

mawenzi · « **Reply #9 on:** May 16, 2006, 06:40:50 PM »

Quote from: sigma. on May 16, 2006, 05:55:17 PM

Now how would you be able to convert this

Quote
(event,580,580,'http://valid.tjp.hu/zoom/collage.jpg', 'http://valid.tjp.hu/zoom/collage_2.jpg')

... lets try this ...

Code: [Select]

(event,{width},{height},'{media_src}','{media_src_2}')

... therefore we need {media_src_2} ... in functions.php ... for your high resolution images ...
... how is the URL structure of your high resolution images ... ?

sigma. · « **Reply #10 on:** May 16, 2006, 06:45:43 PM »

The URL structure for all downloads point to a directory such as this..

http://cydonian.com/gallery/images/download/imagename.jpg

Regular size images are uploaded through 4images and are found at..

http://www.cydonian.com/photos/data/media/###/imagename.jpg

Thanks for giving this a try Mawenzi!

Trev · « **Reply #11 on:** May 16, 2006, 07:01:05 PM »

Hi Mawenzi,

your Flash Zoomer is quite cool...
Would you like to pass it on to other Users?

That would be great

Greets
Trev

mawenzi · « **Reply #12 on:** May 16, 2006, 07:07:01 PM »

... lets try this ... not tested ...
in includes/functions.php find ...

Code: [Select]

    $site_template->register_vars(array(
      "media_src" => $media_src,

and replace with the following code ...

Code: [Select]

$media_src_2 = $site_sess->url(ROOT_PATH."images/download/".$media_file_name."".jpg");

$site_template->register_vars(array(
      "media_src" => $media_src,
      "media_src_2" => $media_src_2,

sigma. · « **Reply #13 on:** May 16, 2006, 07:46:01 PM »

it returned this error.

Parse error: parse error, unexpected T_STRING in /home/cydonia/public_html/photos/includes/functions.php on line 454

mawenzi · « **Reply #14 on:** May 16, 2006, 08:19:43 PM »

... mm ... ok ... I corrected it above ...

4images Forum & Community

News:

Author Topic: [ADD-ON] Image Zoomer (Read 67132 times)

sigma.

[ADD-ON] Image Zoomer

sigma.

Re: Image Zoomer

mawenzi

Re: Image Zoomer

sigma.

Re: Image Zoomer

sigma.

Re: Image Zoomer

mawenzi

Re: Image Zoomer

sigma.

Re: Image Zoomer

mawenzi

Re: Image Zoomer

sigma.

Re: Image Zoomer

mawenzi

Re: Image Zoomer

sigma.

Re: Image Zoomer

Trev

Re: Image Zoomer

mawenzi

Re: Image Zoomer

sigma.

Re: Image Zoomer

mawenzi

Re: Image Zoomer