singapore: the smallest big galery
home » forum » Mods » Full Size Image Popup

You are not logged in.

#1 2005-08-13 23:03:06

quicksketch
Member

Full Size Image Popup

If you have a site with a fixed-width design, you may find it useful to include a popup containing the fullsize image on the image page.

To illustrate, say the user is in a gallery, then clicks on an image. The page changes to the image.tpl.php file. Then, if the user clicks on the image again, a fullsize image is displayed in a popup, where it won't break your fixed-width site design.

Even though the Singapore developer hates popups (I do too for most purposes), this is an excellent compromise between site design and usability.

So... here's the code.

Add the following method to singapore.class.php, right below the code for the function imageThumbnailPopup() (around line 1240).

Code:

  /**
   * Image thumbnail that pops up a new window containing the image
   * @return string
   * @depreciated
   */
  function realImagePopup($index = null)
  {
    $ret =  '<a href="'.$this->imageRealURL($index).'" onclick="';
    $ret .= "window.open('".$this->imageRealURL($index)."','','toolbar=0,resizable=1,";
    $ret .= "width=".($this->imageRealWidth($index)+20).",";
    $ret .= "height=".($this->imageRealHeight($index)+20)."');";
    $ret .= "return false;\">".$this->image($index)."</a>";

    return $ret;
  }

Now, in your image.tpl.php change how you display the image. Usually it is:

Code:

<?php echo $sg->image() ?>

Change this to:

Code:

<?php echo $sg->realImagePopup() ?>

Now users can view the original, full size image in all its 1800x1280 glory!

Last edited by tamlyn (2006-01-24 13:17:08)

Offline

 

#2 2006-01-21 21:13:01

HroSCeK
Guest

Re: Full Size Image Popup

Editor's note: original post corrected hence this post is obsolete.
Hy there.. I must say I hate pup-ups (just like all of you) but I had to enable it since my "full" size pictures can only be 380x285 to fit in my blog! Now this script works great but please fix an error in your guide above:

Code:

$ret .= "return false;">".$this->image($index)."</a>";

replace with

Code:

$ret .= "return false;\">".$this->image($index)."</a>";

(There is a back slash missing)

BTW: since I'm writing this.. Could anybody help on this one? I want to write the above "open in a new window script" in JavaScript so that I would have "onClick="window.close()". I know I would have to change the above script to open with javascript and use template window.. Then the template window would have onclick.. I'm not sure about this since I don't use JavaScript very often. I hope somebody can help me..

Regards

Last edited by tamlyn (2006-01-24 13:19:33)

 

#3 2006-01-24 13:23:36

tamlyn
Lead Developer

Re: Full Size Image Popup

Thanks for the correction.

You mean that you that you want the window that pops up to include a link that closes the window? The js for that is easy, but the php may be a little more complex. You need to create a template page which just displays the image (and whatever else you want) but not the header and footer and stuff like that. Then just change the imageRealURL() value above to whatever the url of the new page that displays your image is.

Offline

 

#4 2006-04-15 11:26:38

deric
Guest

Re: Full Size Image Popup

In 0.10PRE2 I just written (place it somewhere around line 200 in image.class.php):

Code:

function popUp($class = "sgThumbnailAlbum", $type = "album")
  {
    $ret =  '<a href="'.$this->realURL().'" onclick="';
    $ret .= "window.open('".$this->realURL()."','','toolbar=0,resizable=1,";
    $ret .= "width=".($this->realWidth()+20).",";
    $ret .= "height=".($this->realHeight()+20)."');";
    $ret .= "return false;\">".$this->imageHTML($class, $type)."</a>";
    return $ret;
  }

and in image.tpl.php replace echo $sg->image->imageHTML();     by

Code:

    
echo $sg->image->popUp();
 

#5 2006-04-17 14:36:32

tamlyn
Lead Developer

Re: Full Size Image Popup

hmm that exact same method already exists on line 220 of image.class.php but it's called thumbnailPopupLink().

Offline

 

#6 2006-04-17 23:21:05

deric
Member

Re: Full Size Image Popup

In 0.9.11 it could be something like this

Code:

function imagePopup($index = null){
    $ret =  '<a href="'.$this->imageRealURL().'" onclick="';
    $ret .= "window.open('".$this->imageRealURL()."','','toolbar=0,resizable=1,";
    $ret .= "width=".($this->imageRealWidth()+20).",";
    $ret .= "height=".($this->imageRealHeight()+20)."');";
   $ret .= "return false;\">".$this->image($index)."</a>";

    return $ret;
}

I found only function imageThumbnailPopup(), but there is a small difference - this function open full size image. This might be useful if user wants to view the image in original resolution (for example 2048x1536). If you have displayed with $sg->image() picture in full-size, it of course doesn't have any sence.

Offline

 

#7 2006-04-20 15:33:50

tamlyn
Lead Developer

Re: Full Size Image Popup

Ah i getcha roll

Offline

 

#8 2006-08-06 15:55:10

fk.online
Member

Re: Full Size Image Popup

All this stuff wasn't satisfatory for my project and so i started to work out a solution by myself.
Tested and working with 0.10.0

It's simple, just replace the imageHTML function inside image.class.php with the following

Code:

  function imageHTML($class = "sgImage")
  {
      if ($this->width() > 380) { //if image too wide for wordpress design then start here
          $bigtext = "<br><p align = 'center'>Anklicken zur Vollansicht!</p>"; //your text for visitors to let em know it's a smaller version
          $ret  = "<a href = ".$this->imageURL()." target = '_new'><img src=\"".$this->imageURL().'"';  
        $h = ($this->height() / $this->width() * 380); //calculate new height 
        $ret .= "width= '380' height= '$h'";
        if($this->config->imagemap_navigation) $ret .= 'usemap="#sgNavMap" border="0" ';
        $ret .= 'border = 0 alt="'.$this->name().$this->byArtistText().'" /></a>'.$bigtext;

      }else { //image is ok for wordpress design
    $ret  = "<img src=\"".$this->imageURL().'" '; 
    $ret .= 'class="'.$class.'" '; 
    $ret .= 'width="'.$this->width().'" height="'.$this->height().'" ';
    if($this->config->imagemap_navigation) $ret .= 'usemap="#sgNavMap" border="0" ';
    $ret .= 'alt="'.$this->name().$this->byArtistText().'" />';
      }
    return $ret;
  }

If your Image is to wide (here: 380px) the first part will start, calculate a new height and display a "thumbnail"... yeah, it's only resized by the browser...

gl and hf big_smile

I needed this to fit my wordpress.

Last edited by fk.online (2006-08-06 15:55:50)

Offline

 

#9 2006-10-08 06:02:39

eddiejanzer
Member

Re: Full Size Image Popup

on the image popup function,  I have all this working but do not understand code so well.  In that code for the popup on the  include ...image.class, I want to add this

Code:

if (window.focus) {newwindow.focus()}

, how would I do that?

Offline

 

#10 2006-10-08 06:03:50

eddiejanzer
Member

Re: Full Size Image Popup

this code I am hoping will prevent images from piling up behind the browser if the images are not "closed" by the user.

Offline

 

#11 2007-12-15 09:12:15

Math
Member

Re: Full Size Image Popup

I must ask which one is current or working for 0.10.1

Offline

 

#12 2008-01-22 21:40:44

drinkingsouls
Member

Re: Full Size Image Popup

Does anyone have this working in version 0.10.1?
Thanks

Offline

 

#13 2010-04-07 19:20:33

banan
Member

Re: Full Size Image Popup

Maybe better will be Lightview (or similar) instead of javascript popup to show full sized images?

Offline

 

#14 2011-03-21 08:52:33

Re: Full Size Image Popup

im working on 0.10.1 Matt are you having the same situation??

Offline

 

#15 2013-01-17 08:59:30

forger
Member

Re: Full Size Image Popup

My galleries do not appear in admin mode.I dony know why

Offline