paulmac
December 17th, 2003, 11:51
Something that I use on my site(4.0.14) as a crude hack :wink: , that I'd like to see incorporated into the core of Mambo 4.5, is a {mosthumb} for inserting a thumbnail of pics in News/Articles/etc. which, when clicked on, is replaced with the full size image.
The way I've done it in 4.0.14 is :
Thumbnail Create & Replace.
=========================
Place this javascript before the <body> tag in your mambo[theme].php file
[code:1:c9196c7b6d]<SCRIPT language="JavaScript">
function switchImage(imgname)
{
var re = "cthum.php?img=";
rr = document.images[imgname].src;
ss = rr.replace(re, "images/")
document.images[imgname].src = ss;
} // end function
</SCRIPT>[/code:1:c9196c7b6d]
Use this link to display thumbpic and swap to big pic.
[code:1:c9196c7b6d]<IMG class="hand" onclick='switchImage("img1")' SRC="cthum.php?img=subfolder/image.jpg" name=img1 alt="Click to enlarge">[/code:1:c9196c7b6d]
Link explained;
class="hand" // css to change mouse to hand when over thumbpic.
add:' .hand {cursor; hand} ' to you mambotheme css.
onclick="switchImage("img1") // call javascript to swap images, with 'img1' being the tag of the image to swap.
SRC="cthumb.php?img=sub-folder/image.jpg" //location of image relative to images folder ie images/sub-folder/image.jpg (sub-folder is optional)
name="img1" // tag of image to swap. This is what's passed to the javascript and must be unique for each image.
You need to code the image link by hand, but it's not that hard.
Then I added this file to the root folder of my site:
cthum.php
[code:1:c9196c7b6d]<?php
/************************************************** *****/
/*Title : Thumbnail Create & Repace */
/*Creator : paulmac */
/*Description : Creates a thumbpic on the fly and (with javascript) */
/*replaces with full pic when clicked without page reload */
/*NOTE : Make sure to read the readme.txt and insert the javascript into*/
/*you mambo(theme).php file. Otherwise it won't work! */
/************************************************** *****/
$jpegdir = 'images';
$url = $jpegdir .'/'. $HTTP_GET_VARS['img'];
header ("Content-type: image/jpeg"); // create an *.jpg
$pic = @imagecreatefromjpeg($url) or die ("Image not found!");
if ($pic) {[code]<IMG class="hand" onclick='switchImage("img1")' SRC="cthum.php?img=subfolder/image.jpg" name=img1 alt="Click to enlarge">[/code]
$width = imagesx($pic);
$height = imagesy($pic);
$thumbwidth = 160; // width of the thumb 160 pixel
$thumbheight = $thumbwidth * $height / $width;
$thumb = @imagecreatetruecolor ($thumbwidth, $thumbheight) or
die ("Can't create Image!");
imagecopyresized($thumb, $pic, 0, 0, 0, 0, $thumbwidth, $thumbheight, $width, $height);
ImageJPEG($thumb,"",75); // create thumbnail as JPEG
}
?>[/code:1:c9196c7b6d]
In 4.5 the [code:1:c9196c7b6d]{mosthumb}[/code:1:c9196c7b6d] could insert the [code:1:c9196c7b6d]<IMG class="hand" onclick='switchImage("img1")' SRC="cthum.php?img=subfolder/image.jpg" name=img1 alt="Click to enlarge">[/code:1:c9196c7b6d] automatically, allowing the page to load quickly with the small thumbnails, then the user could decide what pics they wanted the larger version of. The rest of the code would be build into the core.(though I daresay it could be re-written to be alot better than my sad effort!)
Anyway, just a thought. You're doing a great job Mambo team. Thanks for all your hard work! :D
Regards
paulmac
The way I've done it in 4.0.14 is :
Thumbnail Create & Replace.
=========================
Place this javascript before the <body> tag in your mambo[theme].php file
[code:1:c9196c7b6d]<SCRIPT language="JavaScript">
function switchImage(imgname)
{
var re = "cthum.php?img=";
rr = document.images[imgname].src;
ss = rr.replace(re, "images/")
document.images[imgname].src = ss;
} // end function
</SCRIPT>[/code:1:c9196c7b6d]
Use this link to display thumbpic and swap to big pic.
[code:1:c9196c7b6d]<IMG class="hand" onclick='switchImage("img1")' SRC="cthum.php?img=subfolder/image.jpg" name=img1 alt="Click to enlarge">[/code:1:c9196c7b6d]
Link explained;
class="hand" // css to change mouse to hand when over thumbpic.
add:' .hand {cursor; hand} ' to you mambotheme css.
onclick="switchImage("img1") // call javascript to swap images, with 'img1' being the tag of the image to swap.
SRC="cthumb.php?img=sub-folder/image.jpg" //location of image relative to images folder ie images/sub-folder/image.jpg (sub-folder is optional)
name="img1" // tag of image to swap. This is what's passed to the javascript and must be unique for each image.
You need to code the image link by hand, but it's not that hard.
Then I added this file to the root folder of my site:
cthum.php
[code:1:c9196c7b6d]<?php
/************************************************** *****/
/*Title : Thumbnail Create & Repace */
/*Creator : paulmac */
/*Description : Creates a thumbpic on the fly and (with javascript) */
/*replaces with full pic when clicked without page reload */
/*NOTE : Make sure to read the readme.txt and insert the javascript into*/
/*you mambo(theme).php file. Otherwise it won't work! */
/************************************************** *****/
$jpegdir = 'images';
$url = $jpegdir .'/'. $HTTP_GET_VARS['img'];
header ("Content-type: image/jpeg"); // create an *.jpg
$pic = @imagecreatefromjpeg($url) or die ("Image not found!");
if ($pic) {[code]<IMG class="hand" onclick='switchImage("img1")' SRC="cthum.php?img=subfolder/image.jpg" name=img1 alt="Click to enlarge">[/code]
$width = imagesx($pic);
$height = imagesy($pic);
$thumbwidth = 160; // width of the thumb 160 pixel
$thumbheight = $thumbwidth * $height / $width;
$thumb = @imagecreatetruecolor ($thumbwidth, $thumbheight) or
die ("Can't create Image!");
imagecopyresized($thumb, $pic, 0, 0, 0, 0, $thumbwidth, $thumbheight, $width, $height);
ImageJPEG($thumb,"",75); // create thumbnail as JPEG
}
?>[/code:1:c9196c7b6d]
In 4.5 the [code:1:c9196c7b6d]{mosthumb}[/code:1:c9196c7b6d] could insert the [code:1:c9196c7b6d]<IMG class="hand" onclick='switchImage("img1")' SRC="cthum.php?img=subfolder/image.jpg" name=img1 alt="Click to enlarge">[/code:1:c9196c7b6d] automatically, allowing the page to load quickly with the small thumbnails, then the user could decide what pics they wanted the larger version of. The rest of the code would be build into the core.(though I daresay it could be re-written to be alot better than my sad effort!)
Anyway, just a thought. You're doing a great job Mambo team. Thanks for all your hard work! :D
Regards
paulmac