Codeupdate 06.06.2009- changed ULR to highslide.com
- fixed STEP 4 (path)
- removed STEP 6
- removed STEP 7
This is an addon to zoom into an Image from the thumbnails with Highslide JS
Demo:
http://rinaldos.homeip.net/categories.php?cat_id=386Step1:
Create a file called thumbnail_index_bit.html. Easy for you, copy your /templates/default/thumbnail_bit.html to /templates/default/thumbnail_index_bit.html.
Step2:
replace in /index.php following line:
find
$new_images .= $site_template->parse_template("thumbnail_bit");replace with:
// original $new_images .= $site_template->parse_template("thumbnail_bit");
$new_images .= $site_template->parse_template("thumbnail_index_bit");
Your index.php uses the thumbnail_index_bit.html to display new files. Every changes in the thumbnail_bit.html has no effect by browsing "yourwebsite/index.php".
Step3:
download the files from Highslide js
http://highslide.com/download.phpCopy the highslide Folder to your /4images/js/ folder. Look after your copy like this:
/js
/js/highslide
/js/highslide/graphics
/js/highslide/highslide-html.js
/js/highslide/highslide-html.packed.js
/js/highslide/highslide.js
/js/highslide/highslide.packed.js
/js/highslide/swfobject.js
Step4:
Open /templates/default/header.html and insert above
{if has_rss}
<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />
these code
<script type="text/javascript" src="{SCRIPT_URL}js/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="{SCRIPT_URL}js/highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '{SCRIPT_URL}js/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
// define the restraining box
hs.useBox = false;
hs.width = 800;
hs.height = 600;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 1,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
Step5:
Open /templates/default/thumbnail_bit.html
replace all with this (I used for this Addon the default 4images thumbnail_bit.html):
<!-- you wish detail page in a small javascript open window, use {thumbnail_openwindow} -->
<br />
<b>{image_name}</b> {if image_is_new}<sup class="new">{lang_new}</sup>{endif image_is_new} ({user_name_link})
<br />
{if user_loggedin}<a href="{media_src}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt="Highslide JS"
title="Click to enlarge" height="60" /></a>{endif user_loggedin}
{if user_loggedout}
{thumbnail}
{endif user_loggedout}
<br/>
<a href="{image_url}">Details</a>
<br/>
{if allow_comments}{lang_comments} {image_comments}{endif allow_comments}<br />
{lightbox_button}
Now, when you click on the thumbail, the Image zooms direct to your screen
I hope this works for you. It works for me with 4Images 1.7.4 / 1.7.6 / 1.7.7
If you have problems with the PATH, please use the absolute path, see here.....If you get some error, or this will not work, or the server must have the absolute path, then take a look here:
http://www.4homepages.de/forum/index.php?topic=20461.msg111627#msg111627
Für alle die in der thumbnail_bit.html oder so die Quelle {media_src_big} haben, sollten diese counterupdate.php nutzen.
http://www.4homepages.de/forum/index.php?topic=20461.msg143119#msg143119Greets
Ingo