Author Topic: Alternate category display page (Read 5486 times)

Maniac · « **on:** March 27, 2006, 04:38:57 AM »

II have created an alternate categoy dsplay page - basically a duplocate of categories.php but with an entirely different layout (for a differen section of my site).

In addition, I have created a new set of templates for my new categories page to use. : i.e.

simpleCtas.php uses "simpleCats.html, simpleCat_bit.html and simpleNail_bit.html"

What I want to do is create an alternate version of the {thumbnail} variable with it's own styling and a link to a pop-up (image only). I looked in functions and created

Code: [Select]

"thumbnail2" => get_thumbnail_code($image_row['image_media_file'], $image_row['image_thumb_file'], $image_row['image_id'], $image_row['cat_id'], $image_row['image_name'], $mode, $show_link),

am I on the right track?

What do I need to change so that the link on my new variable is to a popo-up?

Thanks in advance for any guidance in the right directon...

Maniac · « **Reply #1 on:** March 27, 2006, 05:15:23 AM »

After a little more thought I think I'm making it more complicated than it needs to be...

I still need a bit of help, but I think I figured out a much easier way.

I did everything the same as outlined above, but in my new thumbnail bit file I changed the {thumbnail} variable to {thumbnail_openwindow}. The in functions.php I just changed the link that is generated when openwindow is specified.

Ido however, need to specify the full path to the image - and not the id.

so, instead of:

Code: [Select]

$thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\" onclick=\"opendetailwindow()\" target=\"detailwindow\">".$thumb."</a>";

I need to change it to something like:

Code: [Select]

$thumb = "<a href=\"".$site_sess->url("javascript:PopupPic(\'"PATH-TO-IMAGE((!empty($mode)) ? "&amp;mode=".$mode : ""))."\')\">".$thumb."</a>";

Anyone know what I should put instead of Path to image to achieve this?

The javascritp is something I found elsewhere and which will resize the pop up to the image size...

Thanks in advance

Maniac · « **Reply #2 on:** March 27, 2006, 06:49:18 AM »

OK, I figured it out

It was actually very simple.

Here's what I did:

1. Created a duplicate of categories.php and renamed it simpleCats.php
2. In simpleCats.php I changed the names of the used templates from:

Code: [Select]

$templates_used = 'categories,category_bit,thumbnail_bit';
$main_template = 'categories';

To:

Code: [Select]

$templates_used = 'simpleCats,simpleCats_bit,simpleNail_bit';
$main_template = 'simpleCats';

* make sure to scan the file for ther instances of the templates...

3. I then simply duplicated the original templates and renamed them accordingly and modified them to suit.

4. In simpleNail_bit I changed {thumbnail} to {thumbnail_openwindow}

5. In simpleCats.html I added the following javascript to the head of my document (make sure to change yourDomain to your url):

Code: [Select]

<script language="Javascript"> 
 function PopupPic(sPicURL) { 
  window.open( "http://www.yourDomain.com/popUp.html?"+sPicURL, "", 
  "resizable=1,HEIGHT=200,WIDTH=200"); 
 } 
</script>

6. I then created a file called popUp.html with the following code:

Code: [Select]

<HTML> 
<HEAD> 
<TITLE>From The Gallery</TITLE> 
<script language='javascript'> 
 var arrTemp=self.location.href.split("?"); 
 var picUrl = (arrTemp.length>0)?arrTemp[1]:""; 
 var NS = (navigator.appName=="Netscape")?true:false; 

  function FitPic() { 
   iWidth = (NS)?window.innerWidth:document.body.clientWidth; 
   iHeight = (NS)?window.innerHeight:document.body.clientHeight; 
   iWidth = document.images[0].width - iWidth; 
   iHeight = document.images[0].height - iHeight; 
   window.resizeBy(iWidth, iHeight); 
   self.focus(); 
  }; 
</script> 
</HEAD> 
<BODY bgcolor="#000000" onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> 
<script language='javascript'> 
document.write( "<img src='" + picUrl + "' border=0>" ); 
</script> 
</BODY> 
</HTML>

Finally I updated functions.php:

find:

Code: [Select]

$thumb = "<a href=\"".$site_sess->url(ROOT_PATH."details.php?".URL_IMAGE_ID."=".$image_id.((!empty($mode)) ? "&amp;mode=".$mode : ""))."\" onclick=\"opendetailwindow()\" target=\"detailwindow\">".$thumb."</a>";

and replace it with:

Code: [Select]

$thumb = "<a href=\"javascript:PopupPic('"."/gallery/data/media/".$cat_id."/".$thumb_file_name."')\">".$thumb."</a>";
*note that the path to my gallery is "/gallery" you may have to update yours accordingly.

Uploaded everything and it worked.

Now when I call "simpleCats.php?cat_id=#" I get all the thumbs in the category as expected. and when I click them I get a pop up that displasy only the image requested - the pop-up automatically resizes to fit the image size

You can see a sample here:

http://photo.frescodesigns.com/simpleCats.php?cat_id=63

Hope someone can find this useful

darvid · « **Reply #3 on:** May 23, 2006, 02:54:12 PM »

I find your script very usefull.

But i have a few questions?

Did u install 4images a 2nd time? Because u have changed the $thumbs variable. What is about the categories.php for your other section in your homepage. Did the thumb path work right?

What i additionally want to do, is to show a different thumbnail size than in the 1st categories.php.

Do you have any idea, how i could accomplish that?

4images Forum & Community

News:

Author Topic: Alternate category display page (Read 5486 times)

Maniac

Alternate category display page

Maniac

Re: Alternate category display page

Maniac

Re: Alternate category display page

darvid

Re: Alternate category display page