Forums / Developer / Display large image on click small image

Display large image on click small image

Author Message

Muhammad Khalid Majeed

Tuesday 27 January 2004 4:55:52 am

I edit article class and add new attribute large_thumbnail.
Now, when the article will display; then small image will diplay in article. I need when i click on small image then large image should be opened in pop up window. How can i pass the large image path to pop windows that will display the image???

Muhammad Khalid
Software Engineer
www.webgurru.net

Alex Jones

Tuesday 27 January 2004 7:02:17 am

Here is the code I use to display a small image that acts as a link to a pop-up window displaying the original image. You should be able to modify it to your needs. I have this in an image override template.

{default image_class=large alignment=false() hspace=false() border_size=0}
{let image_content=$attribute.content image=$image_content[$image_class]}
  <a href={$image_content[original].full_path|ezroot} target="popUpWin"
onclick="popUpWin(this.href,'console',
  {$image_content[original].width},
  {$image_content[original].height});return false;" 
title="View Larger Image">
<img src={$image.full_path|ezroot} width="{$image.width}" height="{$image.height}"
{section show=$hspace}hspace="{$hspace}"{/section} 
{section show=$alignment}align="{$alignment}"{/section} 
border="{$border_size}" alt="{$image_content.alternative_text|wash(xhtml)}" /></a>
{/let}
{/default}

Let me know if you have any questions.

Alex

Also, I added some carriage returns within the anchor tag so it would display nicely here in the forums. You can remove the returns for your code.

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Philip K.

Tuesday 10 January 2006 11:25:32 pm

Hi.

I was searching for an image zoom yesterday and found this thread.
There were some problems, perhaps I made something wrong...?

I replaced

{let image_content=$attribute.content image=$image_content[$image_class]}

with

{let image_content=$node.object.data_map.picture.content.original_filename image=$image_content[$image_class]}

When I reload the page to test it, I always get the same error:

Fatal error: Call to undefined function: storedata() in /home/httpd/vhosts/mywebsite/httpdocs/kernel/classes/datatypes/ezimage/ezimagealiashandler.php on line 1207
Fatal error: eZ publish did not finish its request

The execution of eZ publish was abruptly ended, the debug output is present below.

Can anyone help me?

Thanks a lot...

Linux is like a wigwam; no windows, now gates, and apache inside!

Philip K.

Friday 13 January 2006 8:27:30 am

Is there no other way to get a bigger view of an image??

Linux is like a wigwam; no windows, now gates, and apache inside!

Norman Leutner

Sunday 15 January 2006 1:28:12 am

I also got this message some time ago.
As far as I remind I updated to a newer version and it was gone,
but the code of your template also looks a bit confusing at the first sight...

Things you can also check:

1. clear all caches
2. check directory permissions to var/
3. check your image.ini.append.php

I would recommed to using the following:

javascript.js

function imagezoom(w,h,url) {
    var Fensteroptionen = "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0";
    var popupWindow = window.open(url, 'Imagezoom', Fensteroptionen + ',width=' + w + ',height=' + h);
    var focus = popupWindow.focus();

}

template code:

<a href='javascript:imagezoom(800,600,"/{$node.data_map.image.content[original].url}")' >
  {attribute_view_gui image_class=original attribute=$node.object.data_map.image alt=$node.name}
</a>

This will open a popup window with the original image an static size 800,600 and sets the focus to it.

Keep in mind that the image attribute is called 'image' in this example.

You may also make the with an height of teh popup dynamic by using the following template code:

<a href='javascript:popup({$node.data_map.image.content[original].width|sum(20)},{$node.data_map.image.content[zoomimage].height|sum(30)},"/{$node.data_map.image.content[original].url}")' >

For having nice images with the same size I would to edit your image.ini.append.php
and add the following:

AliasList[]=zoomimage

[zoomimage]
Reference=
Filters[]
Filters[]=geometry/scaledownonly=600;500

and replace the [original] imageclass with [zoomimage] in your template code.

Another (nicer) way of displaying the images in a popup window is to create a popup pagelayout in ez.
But thats a bit more complicated.

I hope this helps.

Mit freundlichen Grüßen
Best regards

Norman Leutner

____________________________________________________________
eZ Publish Platinum Partner - http://www.all2e.com
http://ez.no/partners/worldwide_partners/all2e_gmbh

Norman Leutner

Sunday 15 January 2006 1:55:35 am

I forgot:

This code works in all browsers without any problems as far as I know.

Always beware of calling the javascript function "popup",
otherwise some popup-blockers will do their job ;)

If anyone has suggestions to this solution, please let me know.

Mit freundlichen Grüßen
Best regards

Norman Leutner

____________________________________________________________
eZ Publish Platinum Partner - http://www.all2e.com
http://ez.no/partners/worldwide_partners/all2e_gmbh

Philip K.

Monday 16 January 2006 1:20:56 am

Thank a lot - your code works perfect.

Dankeschön :)

Linux is like a wigwam; no windows, now gates, and apache inside!

Norman Leutner

Monday 16 January 2006 3:02:46 am

Dont' mind, send a beer from your local brewery to my adress ;)

Mit freundlichen Grüßen
Best regards

Norman Leutner

____________________________________________________________
eZ Publish Platinum Partner - http://www.all2e.com
http://ez.no/partners/worldwide_partners/all2e_gmbh

Per Gylling

Tuesday 17 January 2006 4:37:54 am

Is it possible to ex. have a have a smaller picture in your article, and then if you clik on the image, it will push the text further down in a fullcontentwide version ? No need to have a PopUp for showing large images in this "popUp blocker centrury".

Kind regards
Per
www.scandicAngler.com

Esteban Rodriguez

Tuesday 17 January 2006 6:35:56 am

You can certainly do that.

A few ways I can think of is load both images (small and large) in the template and then use javascript and css to hide / unhide them. Or use ajax (don't know much about it, though) to dynamically load the large image on demand.

We've done some javascript on a site to show a grayscale image on default, and bring the full color image on mouse over with javascript. I've been looking for the code to post it, but couldn't find it yet.
I'll post it asap if you're interested.

Esteban

I have great faith in fools; self-confidence my friends call it.

http://presencia.net

P. Gylling

Tuesday 17 January 2006 7:58:37 am

Hi again

Thanks - any url refferences ?

Kind regards
Per

Norman Leutner

Wednesday 18 January 2006 12:19:46 am

Here is explained how to change images and html elements with javascript:

http://home.arcor.de/michaels.interface/tutors/javascript/exchange.display/

Mit freundlichen Grüßen
Best regards

Norman Leutner

____________________________________________________________
eZ Publish Platinum Partner - http://www.all2e.com
http://ez.no/partners/worldwide_partners/all2e_gmbh

laurent le cadet

Tuesday 14 February 2006 1:21:18 am

Hi,

Another simple approch is to deal with css :

Template :

	<div class="photos">
		{section show=$node.object.data_map.photo1.content}
		<a href="#">
			<div class="grande">{attribute_view_gui image_class=large attribute=$node.object.data_map.photo1}</div>
			<div class="petite">{attribute_view_gui image_class=articlethumbnail attribute=$node.object.data_map.photo1}</div>
		</a>
		{/section}
		{section show=$node.object.data_map.photo2.content}
		<a href="#">
			<div class="grande">{attribute_view_gui image_class=large attribute=$node.object.data_map.photo2}</div>
			<div class="petite">{attribute_view_gui image_class=articlethumbnail attribute=$node.object.data_map.photo2}</div>
		</a>
		{/section}
		{section show=$node.object.data_map.photo3.content}
		<a href="#">
			<div class="grande">{attribute_view_gui image_class=large attribute=$node.object.data_map.photo3}</div>
			<div class="petite">{attribute_view_gui image_class=articlethumbnail attribute=$node.object.data_map.photo3}</div>
		</a>
		{/section}
		{section show=$node.object.data_map.photo4.content}
		<a href="#">
			<div class="grande">{attribute_view_gui image_class=large attribute=$node.object.data_map.photo4}</div>
			<div class="petite">{attribute_view_gui image_class=articlethumbnail attribute=$node.object.data_map.photo4}</div>
		</a>
		{/section}
		{section show=$node.object.data_map.photo5.content}
		<a href="#">
			<div class="grande">{attribute_view_gui image_class=large attribute=$node.object.data_map.photo5}</div>
			<div class="petite">{attribute_view_gui image_class=articlethumbnail attribute=$node.object.data_map.photo5}</div>
		</a>
		{/section}
	</div>

CSS :

div.photos
{
	border:1px solid #C6DFEC;
	position:relative;
	text-align:center;
	height:110px;
	padding-top:5px;
}

div.photos a, div.photos a:hover
{
	text-decoration:none; /*IE small bug */
}

a div.grande
{
	display: none;
}

a:hover div.grande
{
	display: block;
	position:absolute;
	top:115px;
	left:0px;
}

div.petite
{
	display: inline;
	width:70px;
	vertical-align:middle;
}

Done.

It seems to be bugless.

Laurent

Yann Decam

Thursday 29 March 2007 2:43:30 pm

Laurent,
I've tried you css example for zooming image.
I got it working using opera but not with IE.6 under EZ3.9.1
Did you get it working for you under this configuration ?
Thanks for the help.

laurent le cadet

Thursday 29 March 2007 11:50:23 pm

sorry, but I didn't try this with eZ 3.9.
As I remember it works with IE6.
No problem using FireFox or IE7.

As it's only a CSS approch, it should be very easy to solve.

keep in mind that this solution loads both large and small images, so it can result a large amont of ko depending on the number of pictures.
Another alternative is to load only the large view.

<a href="#">
<div class="thumbnail" style="background:url(/{$node.data_map.photo.content['large'].url}) no-repeat -4em -4em"></div>
<div class="large">
{attribute_view_gui attribute=$node.data_map.photo image_class=large}
</div>
</a>

The background positions choice depends on the height/width of your large image settings.
It will show only a detail of images which will be palced (here) in a 70/70px square.
It can be a nice way to spray (mind the weight!) a thumbnail collection.

some CSS :

div.thumbnail
{
width:70px;
height:70px;
overflow:hidden;
}

a:hover div.large
{
border:1px solid #ADA38A;
background:#FFFFFF url(../images/whatyouwant.png) repeat-x;
padding:5px;
display:block;
position:absolute;
top:100px;
left:100px;
}

Laurent