4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
September 19, 2018, 10:09:57 PM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support) (Moderators: mawenzi, Rembrandt)
| | |-+  Addon, Highslide from Thumbnail Image
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] 2 3 4 5 ... 7 » »» Print
Current Topic Rating: *****
Author Topic: Addon, Highslide from Thumbnail Image  (Read 94958 times)
rinaldos
Guest
« 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
1
$new_images .= $site_template->parse_template("thumbnail_bit");

replace with:
1
2
// 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

1
2
{if has_rss}
<
link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />

these code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 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 Smile
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  [Expand]
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 » Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« 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 ...
Logged

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
« 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 Sad

Gruß
Ingo
Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« 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 ...
Logged

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
« Reply #4 on: February 08, 2008, 03:25:25 PM »

Habe gerade die thumbnail_bit.html wie folgt geändert

1
2
3
4
5
6
{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).
Logged
Nicky
Administrator
4images Guru
*****
Offline Offline

Posts: 3195

Thank You
-Given: 26
-Receive: 57


View Profile
« Reply #5 on: February 08, 2008, 04:24:42 PM »

*) verschoben  Smile

@rinaldos,

thx a lot!
Logged

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
« Reply #6 on: February 08, 2008, 04:48:32 PM »

Added Step 7

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

Smile
Logged
beule
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« Reply #7 on: February 09, 2008, 02:48:57 PM »

works it on 1.7.6?
Logged
rinaldos
Guest
« 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
Logged
beule
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« 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 » Logged
rinaldos
Guest
« Reply #10 on: February 09, 2008, 06:56:41 PM »

Ich nutze die aktuelle Version von HIGHSLIDE.
Auszug aus Highslide.js

1
2
3
4
5
6
/******************************************************************************
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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
Logged
beule
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« 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 » Logged
beule
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« 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...!
Logged
rinaldos
Guest
« Reply #13 on: February 10, 2008, 12:59:42 PM »

Bei mir klappt das ohne den Punkt Sad
Ich hatte gerade alles auf einer "clean install" gemacht und da klappte auch alles Sad 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 » Logged
beule
Newbie
*
Offline Offline

Posts: 48

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« 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 Sad

Aber ich versteh trotzdem noch nicht, warum diese LUPE zum vergrößern nicht auftaucht, wenn ich über das Thumbnail fahre?!?!
Logged
Pages: [1] 2 3 4 5 ... 7 » »» Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.065 seconds with 20 queries.