Author Topic: Addon, Highslide from Thumbnail Image  (Read 121504 times)

0 Members and 1 Guest are viewing this topic.

rinaldos

  • Guest
Addon, Highslide from Thumbnail Image
« on: February 08, 2008, 02:18:31 PM »
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=386

Step1:
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.php


Copy 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',
	
	
interval5000,
	
	
repeatfalse,
	
	
useControlstrue,
	
	
fixedControls'fit',
	
	
overlayOptions: {
	
	
	
opacity1,
	
	
	
position'bottom center',
	
	
	
hideOnMouseOuttrue
	
	
}
	
});
</
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.....

Quote
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#msg143119

Greets
Ingo
« Last Edit: December 16, 2009, 12:28:40 PM by rinaldos »

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Addon, Highslide from Thumbnail Image
« Reply #1 on: February 08, 2008, 02:47:56 PM »
... das sieht ja absolut perfekt bei dir aus ... Klasse ... !
... doch leider wird bei dieser Art der Bildbetrachtung der Bild-Hit-Counter außer Kraft gesetzt ... schade eigentlich ...
... werde es trotzdem bei mir testen ...
... hätte dieses Addon gerne nach Mods & Plugins (Releases & Support) verschoben ... *)

*) geht leider nicht, da mir in diesem Teil des Forums dazu die Rechte fehlen ... @Acidgod, ivan ... bitte nach nach Mods & Plugins (Requests & Discussions) verschieben ... den Rest mache ich dann ... oder Nicky nimmt sich der kompletten Sache an ...
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

rinaldos

  • Guest
Re: Addon, Highslide from Thumbnail Image
« Reply #2 on: February 08, 2008, 02:51:49 PM »
Ui,
nicht nur der Counter wird ausgehoben, auch die Rechte wo Nutzer keine Rechte haben die Details zu sehen. Fällt mir gerade mal so auf...... Aber ich wüsste nun nicht, wie ich dieses ändern kann :-(

Gruß
Ingo

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Addon, Highslide from Thumbnail Image
« Reply #3 on: February 08, 2008, 03:05:36 PM »
... das Problem mit den Rechten würde man über eine if / else Abfrage gelöst bekommen ...
... so dass entweder die "thumbnail_bit" oder die "thumbnail_index_bit" angezeigt wird ...
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

rinaldos

  • Guest
Re: Addon, Highslide from Thumbnail Image
« Reply #4 on: February 08, 2008, 03:25:25 PM »
Habe gerade die thumbnail_bit.html wie folgt geändert

Code: [Select]
{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}

Nun klappt es auch mit den rechten. Codeupdate oben schon durchgeführt. Habe dieses in meiner Galerie nun nicht aktiviert, da sonst kein Demo vorhanden ist. Ich brauche die Userrechte nur für ein paar Detailfunktionen (download).

Offline Nicky

  • Administrator
  • 4images Guru
  • *****
  • Posts: 3.195
    • View Profile
Re: Addon, Highslide from Thumbnail Image
« Reply #5 on: February 08, 2008, 04:24:42 PM »
*) verschoben  :)

@rinaldos,

thx a lot!
cheers
Nicky
Your first three "must do" before you ask a question ! (© by V@no)
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

nicky.net 4 4images
Signature stolen from mawenzi

rinaldos

  • Guest
Re: Addon, Highslide from Thumbnail Image
« Reply #6 on: February 08, 2008, 04:48:32 PM »
Added Step 7

Fix for wrong path in highslide.js. :-( I had installed this one for a long time, so I forgot that I have changed the path.

:-)

Offline beule

  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: Addon, Highslide from Thumbnail Image
« Reply #7 on: February 09, 2008, 02:48:57 PM »
works it on 1.7.6?

rinaldos

  • Guest
Re: Addon, Highslide from Thumbnail Image
« Reply #8 on: February 09, 2008, 03:19:35 PM »
I don't know, but i think that this works also on 1.7.6, because you change only an template an one line in index.php.....
If you want to test more from Highslide, you can see the codes in his example files. An it is easy to use these codes. You can do this with my short explanation.

Ingo

Offline beule

  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: Addon, Highslide from Thumbnail Image
« Reply #9 on: February 09, 2008, 06:27:15 PM »
hmmm jetzt geht garnichts mehr, überall steht Highslide JS anstatt einem Thumbnails und es kommt beim draufklicken ein neues fenster anstatt dem javascript, bitte um hilfe...!!!??? danke!

siehe bild



PS: ICH GLAUBE DU HAST EINE ALTE VERSION VON HIGHSLIDE BENUTZT, KANNST DU MIR SAGEN WELCHE???!!!
« Last Edit: February 09, 2008, 06:44:59 PM by beule »

rinaldos

  • Guest
Re: Addon, Highslide from Thumbnail Image
« Reply #10 on: February 09, 2008, 06:56:41 PM »
Ich nutze die aktuelle Version von HIGHSLIDE.
Auszug aus Highslide.js

Code: [Select]
/******************************************************************************
Name:    Highslide JS
Version: 3.3.8 (January 26 2008)
Config:  default
Author:  Torstein H¯nsi
Support: http://vikjavev.no/highslide/forum
Also auch nichts alltes.
Hast du die Daten in die CSS Datei übernommen? Sind die Pfadangaben richtig (Also mit /js/highslide)?
ich hatte das Problem auch einmal, aber das lag daran das er die Thumbnails nicht gefunden hatte.
Wenn du deine thumbnail_index_bit.html wieder nach thumbnail_bit.html kopierst, hast du ja den Ursprungszustand wiederhergestellt.

teste doch mal meine thumbnail_bit.html

Code: [Select]
<table class="tablebgcolor" cellspacing="0" cellpadding="0" width="140" border="0" class="td3">
<tr>
<td height="40" colspan="0" class="td4" align="center">
     &nbsp;&nbsp;&nbsp;<b>{image_name}</b><br/>{if image_is_new}<span class="new"><small>{lang_new}</small></span></b>{endif image_is_new}
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" width="140" border="0" class="td3" valign="top">
<tr>
<td height="140" valign="center" align="center">
<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="80" /></a>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" height="10" width="140" border="0" class="td3">
<tr>
<td valign="top" align="center">
         <a href="{image_url}">Detailansicht</a>
</td>
</tr>
</table>
<table cellspacing="0" valign="top" cellpadding="0" height="170" width="140" border="0" class="td3">
<tr>
<td valign="top">
<li><a href="{cat_url}">Kategorie: {cat_name}</a></li>
<li>Dateigrˆfle : {image_file_size}</li>
<li>Dateigrˆfle dl: {download_image_file_size}</li>
<li>Datum : {image_date1}</li>
<li>Auflˆsung : {download_width}x{download_height}</li>
<li>Bildhits : {image_hits}</li>
<li>Rating : {image_rating}</li>
<li>Votes: {image_votes}</li>
<li>Downloads : {image_downloads}</li>
<li>Kommentare : {image_comments}</li>
{ifnot searchbot}<li>{download_small_button} {lightbox_small_button}</li>{endifnot searchbot}
</td>
</tr>
</table>

Gruß
Ingo

Offline beule

  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: Addon, Highslide from Thumbnail Image
« Reply #11 on: February 10, 2008, 12:05:38 PM »
Step3:
download the files from Highslide js
http://vikjavev.no/highslide/download.php
His examples:
http://vikjavev.no/highslide/#examples

Copy the  highslide Folder to your /4images/js folder (Not the example files). 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



Also deine thumbnail_bit haut auch nicht hin, siehst du auf den Unterschied bei meinen highslide files und bei deinen, liegt es vielleicht daran?

mfg beule




So warum er die Thumbnails nicht angezeigt hatte habe ich nur herausgefunden!!!

Siehe veränderten Code:

<!-- 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}

Aber das die Bilder in einem java-fenster aufgehen funktioniert immernochnicht!!!

Kannst du nichtmal deine ganzen Dateien aus dem js-ordner in einer zip packen und hochladen???
« Last Edit: February 10, 2008, 12:41:26 PM by beule »

Offline beule

  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: Addon, Highslide from Thumbnail Image
« Reply #12 on: February 10, 2008, 12:48:45 PM »
Jetzt hab ich die ganzen Fehler gefunden, es fehlen überall in den Codes die ./js/..... für den rootpath auch in der header.html usw...!

rinaldos

  • Guest
Re: Addon, Highslide from Thumbnail Image
« Reply #13 on: February 10, 2008, 12:59:42 PM »
Bei mir klappt das ohne den Punkt :-(
Ich hatte gerade alles auf einer "clean install" gemacht und da klappte auch alles :-( Aber wieso das bei dir mit dem absoluten Pfad nicht klappt?
Aber schön das es nun klappt. Werde mal alles bei mir mit dem PUNKT testen.....

Da dieses bei mir auch mit dem PUNKT funktioniert, habe ich meinen Code angepasst und den PUNKT im Code eingefügt. Danke für deinen Hinweis, auf den PUNKT wäre ich nicht gekommen......

Gruß
Ingo
« Last Edit: February 10, 2008, 01:17:22 PM by rinaldos »

Offline beule

  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: Addon, Highslide from Thumbnail Image
« Reply #14 on: February 10, 2008, 01:46:19 PM »
habe es jetzt komplett hinbekommen, aber leider nur unter Firefox, ich glaube aber, das die meisten die meine page besuchen IE haben :-(

Aber ich versteh trotzdem noch nicht, warum diese LUPE zum vergrößern nicht auftaucht, wenn ich über das Thumbnail fahre?!?!