4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
June 29, 2016, 06:17:32 PM

Login with username, password and session length
Search:     Advanced search
Follow 4images on twitter: Click here to follow!
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)
| | |-+  [MOD]Slideshow mit Highslide JS
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] 2 3 4 5 » »» Print
Current Topic Rating: *****
Author Topic: [MOD]Slideshow mit Highslide JS  (Read 53440 times)
rinaldos
Guest
« on: August 13, 2009, 10:07:15 PM »

[MOD]Slideshow mit Highslide JS

Mit diesem MOD ist es Dir möglich, deiner 4images Installation eine Slideshow anzubieten. Voraussetzungen:
- Die User müssen Java aktiviert haben
- Highslide JS muss auf dem Server installiert werden. (http://highslide.com/download.php)

Achte auf die Lizenzbestimmungen bei Highslide JS
http://highslide.com/#licence


Demo:
Über die Suche
http://rinaldos.homeip.net/search.htm?search_keywords=Norwegen&submit=Suchen

Über eine Kategorie
http://rinaldos.homeip.net/cat228.htm
http://4images_1.rinaldos.homeip.net/categories.php?cat_id=1 (standard 4images Installation 1.7.7)
Sobald du einen dieser Links angeklickt hast, startest du die Slideshow mit einem Klick auf: Slideshow.

folgende Dateien müssen geändert werden:

Dein Template Verzeichnis
   categories.html
   search.html
   lightbox.html

4images ROOT Verzeichnis
   categories.php
   lightbox.php
   search.php

zusätzlich musst du ein Verzeichnis im 4Images Hauptverzeichnis anlegen
   /js
  
Nun musst du die aktuelle Version von Highslide JS herunterladen (http://highslide.com/download.php). Nachdem du die ZIP Datei entpackt hast, findest du darin den Ordner highslide. Diesen Ordner kopierst du so wie er ist in das Verzeichnis "/js". Die Verzeichnisstruktur sieht dann so aus:

/js
/js/highslide/
/js/highslide/graphics/
/js/highslide/graphics/outlines/

Style ist nun Deins, in den Templates musst du folgende Variabeln nutzen
search.html
1
2
3
4
5
{if highslide}
{highslide_link}
{highslide_js}
{slideshow_highslide}
{endif highslide}

lightbox.html (am besten in den Abschnitt {if thumbnails} / {endif thumbnails})
1
2
3
{highslide_link}
{highslide_js}
{slideshow_highslide}

categories.html (am besten vor den Abschnitt {if categories}  / {endif categories})
1
2
3
{highslide_link}
{highslide_js}
{slideshow_highslide}

füge in folgenden Dateien, jeweils vor
1
2
3
//-----------------------------------------------------
//--- Clickstream -------------------------------------
//-----------------------------------------------------

folgenden Code ein:

categories.php
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
// [MOD] Slideshow with HIGHSLIDE START

$sql "SELECT i.image_id, i.cat_id, i.user_id, i.image_name, i.image_active, i.image_media_file, i.image_thumb_file ".$additional_sql.", c.cat_name".get_user_table_field(", u.""user_name")."
        FROM ("
.IMAGES_TABLE." i,  ".CATEGORIES_TABLE." c) 
        LEFT JOIN "
.USERS_TABLE." u ON (".get_user_table_field("u.""user_id")." = i.user_id)
        WHERE i.image_active = 1 AND i.cat_id = 
$cat_id AND c.cat_id = i.cat_id
        AND i.cat_id IN ("
.get_auth_cat_sql("auth_viewimage").")
        AND image_media_file like '%JPG' or '%jpg'
        ORDER BY "
.$config['image_order']." ".$config['image_sort'].", i.image_id ".$config['image_sort']."";
  
$result $site_db->query($sql);
  
$num_rows $site_db->get_numrows($result);
if (
$num_rows) {
	
$highslide_link "<p style=\"text-align: center;\">
	
<a id=\"thumb1\" class='highslide' href='javascript:;' onclick=\"document.getElementById('gallery').onclick(); return false;\"><b>Slideshow<b></a>
	
</p>"
;
  
$count 0;
  
$bgcounter 0;
  
$slideshow_highslide "<div class=\"highslide-gallery hidden-container\" bgcolor=\black\">\n";
  while (
$image_row $site_db->fetch_array($result)){
   
$slideshow_highslide .= "<a class=\"highslide\" id=\"gallery\" href=\"./".MEDIA_DIR."/".$image_row['cat_id']."/".$image_row['image_media_file']."\" title=\"".$image_row['image_name']."\" onclick=\"return hs.expand(this, miniGalleryOptions1)\"><img src=\"".ROOT_PATH.THUMB_DIR."/".$image_row['cat_id']."/".$image_row['image_thumb_file']."\"></a>\n";
  }
// end while
     
$slideshow_highslide .= "</div>";

    
$highslide_js .= "\n<script type=\"text/javascript\" src=\"".ROOT_PATH."js/highslide/highslide-full.js\"></script>\n";
    
$highslide_js .= "\n<script type=\"text/javascript\" src=\"".ROOT_PATH."js/highslide/highslide_cfg_slide.js\" charset=\"utf-8\"></script>";
    
$highslide_js .= "\n<link rel=\"stylesheet\" type=\"text/css\" href=\"".ROOT_PATH."js/highslide/highslide.css\" />\n";
$site_template->register_vars(array(
  
"highslide_link" => $highslide_link,
  
"highslide_js" => $highslide_js,
  
"slideshow_highslide" => $slideshow_highslide
));


}
// [MOD] Slideshow with HIGHSLIDE END

search.php

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
41

// [MOD] Slideshow with HIGHSLIDE START

if ($num_rows_all && $show_result == 1)  {
 
$sql "SELECT i.image_id, i.cat_id, i.user_id, i.image_name,  i.image_date, i.image_active, i.image_media_file, i.image_thumb_file".$additional_sql.", c.cat_name".get_user_table_field(", u.""user_name")."
          FROM ("
.IMAGES_TABLE." i,  ".CATEGORIES_TABLE." c)
          LEFT JOIN "
.USERS_TABLE." u ON (".get_user_table_field("u.""user_id")." = i.user_id)
          WHERE i.image_active = 1
          
$sql_where_query
          AND c.cat_id = i.cat_id 
$cat_id_sql
          AND i.cat_id IN ("
.get_auth_cat_sql("auth_viewimage").")
          AND image_media_file like '%JPG' or '%jpg'
          ORDER BY "
.$config['image_order']." ".$config['image_sort'].", image_id ".$config['image_sort']."";
  
$result $site_db->query($sql);
  
$num_rows $site_db->get_numrows($result);
  
$highslide_js "";
if (
$num_rows) {
	
$highslide_link "<p style=\"text-align: center;\">
	
<a id=\"thumb1\" class='highslide' href='javascript:;' onclick=\"document.getElementById('gallery').onclick(); return false;\"><b>Slideshow<b></a>
	
</p>"
;
  
$count 0;
  
$bgcounter 0;
  
$slideshow_highslide "<div class=\"highslide-gallery hidden-container\" bgcolor=\black\">\n";
  while (
$image_row $site_db->fetch_array($result)){
       
$slideshow_highslide .= "<a class=\"highslide\" id=\"gallery\" href=\"./".MEDIA_DIR."/".$image_row['cat_id']."/".$image_row['image_media_file']."\" title=\"".$image_row['image_name']."\" onclick=\"return hs.expand(this, miniGalleryOptions1)\"><img src=\"".ROOT_PATH.THUMB_DIR."/".$image_row['cat_id']."/".$image_row['image_thumb_file']."\"></a>\n";
  }
// end while
  
$slideshow_highslide .= "</div>";
    
$highslide_js .= "\n<script type=\"text/javascript\" src=\"".ROOT_PATH."js/highslide/highslide-full.js\"></script>\n";
    
$highslide_js .= "\n<script type=\"text/javascript\" src=\"".ROOT_PATH."js/highslide/highslide_cfg_slide.js\" charset=\"utf-8\"></script>";
    
$highslide_js .= "\n<link rel=\"stylesheet\" type=\"text/css\" href=\"".ROOT_PATH."js/highslide/highslide.css\" />\n";
//    $highlslide_js .= "";
  
$highslide_js .= "</script>\n";
 }
$site_template->register_vars(array(
  
"highslide_link" => $highslide_link,
  
"highslide_js" => $highslide_js,
  
"slideshow_highslide" => $slideshow_highslide,
  
"highslide" => $highslide_js
));
}
// [MOD] Slideshow with HIGHSLIDE END

lightbox.php

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
// [MOD] Slideshow with HIGHSLIDE START
if ($num_rows_all) {
  
$sql "SELECT i.image_id, i.cat_id, i.user_id, i.image_name, i.image_active, i.image_media_file, i.image_thumb_file".$additional_sql.", c.cat_name".get_user_table_field(", u.""user_name")."
        FROM ("
.IMAGES_TABLE." i,  ".CATEGORIES_TABLE." c)
        LEFT JOIN "
.USERS_TABLE." u ON (".get_user_table_field("u.""user_id")." = i.user_id)
        WHERE image_active = 1 AND image_id IN (
$image_id_sql) AND c.cat_id = i.cat_id AND i.cat_id NOT IN (".get_auth_cat_sql("auth_viewcat""NOTIN").")
        ORDER BY "
.$config['image_order']." ".$config['image_sort'].", i.image_id ".$config['image_sort']."";
  
$result $site_db->query($sql);
  
$num_rows $site_db->get_numrows($result);

	
$highslide_link "<p style=\"text-align: center;\">
	
<a id=\"thumb1\" class='highslide' href='javascript:;' onclick=\"document.getElementById('gallery').onclick(); return false;\"><b>Slideshow<b></a>
	
</p>"
;
  
$count 0;
  
$bgcounter 0;
  
$slideshow_highslide "<div class=\"highslide-gallery hidden-container\" bgcolor=\black\">\n";
  while (
$image_row $site_db->fetch_array($result)){
   
$slideshow_highslide .= "<a class=\"highslide\" id=\"gallery\" href=\"./".MEDIA_DIR."/".$image_row['cat_id']."/".$image_row['image_media_file']."\" title=\"".$image_row['image_name']."\" onclick=\"return hs.expand(this, miniGalleryOptions1)\"><img src=\"".ROOT_PATH.THUMB_DIR."/".$image_row['cat_id']."/".$image_row['image_thumb_file']."\"></a>\n";
  }
// end while
     
$slideshow_highslide .= "</div>";

    
$highslide_js .= "\n<script type=\"text/javascript\" src=\"".ROOT_PATH."js/highslide/highslide-full.js\"></script>\n";
    
$highslide_js .= "\n<script type=\"text/javascript\" src=\"".ROOT_PATH."js/highslide/highslide_cfg_slide.js\" charset=\"utf-8\"></script>";
    
$highslide_js .= "\n<link rel=\"stylesheet\" type=\"text/css\" href=\"".ROOT_PATH."js/highslide/highslide.css\" />\n";
$site_template->register_vars(array(
  
"highslide_link" => $highslide_link,
  
"highslide_js" => $highslide_js,
  
"slideshow_highslide" => $slideshow_highslide
));

}
// [MOD] Slideshow with HIGHSLIDE END

Nun erstelle die Konfigurationsdatei deiner Slideshow.
Erstelle die Datei /js/highslide/highslide_cfg_slide.js und füge folgenden Code ein

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
hs.graphicsDir = 'js/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.autoplay = true;
wrapperClassName: 'borderless floating-caption',
hs.outlineType = 'outer-glow';
hs.wrapperClassName = 'dark';
hs.dimmingOpacity = 1.0;
hs.captionEval = 'this.a.title';
hs.numberPosition = 'caption';
hs.useBox = true;
hs.width = 1024;
hs.height = 768;
dimmingOpacity: 1;
hs.addSlideshow({
  interval: 5000,
  repeat: false,
  useControls: true,
  fixedControls: true,
  overlayOptions: {
      className: 'large-dark',
      opacity: .75,
      position: 'bottom center',
offsetX: '0',
offsetY: '-10',
      hideOnMouseOut: true
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});
var miniGalleryOptions1 = {
thumbnailId: 'thumb1'
}

hs.lang = {
cssDirection: 'ltr',
loadingText: 'Lade...',
loadingTitle: 'Klick zum Abbrechen',
focusTitle: 'Klick um nach vorn zu bringen',
fullExpandTitle: 'Zur Originalgröße erweitern',
creditsText: 'Powered by <i>Highslide JS</i>',
creditsTitle: 'Gehe zur Highslide JS Homepage',
previousText: 'Voriges',
nextText: 'Nächstes',
moveText: 'Verschieben',
closeText: 'Schließen',
closeTitle: 'Schließen (Esc)',
resizeTitle: 'Größe wiederherstellen',
playText: 'Abspielen',
playTitle: 'Slideshow abspielen (Leertaste)',
pauseText: 'Pause',
pauseTitle: 'Pausiere Slideshow (Leertaste)',
previousTitle: 'Voriges (Pfeiltaste links)',
nextTitle: 'Nächstes (Pfeiltaste rechts)',
moveTitle: 'Verschieben',
fullExpandText: 'Vollbild',
number: 'Image %1 of %2',
restoreTitle: 'Klick um das Bild zu schließen, klick und ziehe um zu verschieben. Benutze Pfeiltasten für vor und zurück.'
};

Du kannst deine Sliedshow mit dem Konfigurator von Highslide JS nach belieben konfigurieren und anpassen.

Dazu gehe hierhin http://highslide.com/editor/ und ersetzte ggf den Code deiner Konfigurationsdatei mit dem Inhalt "View Javascript" -> Javascript.



Damit der Counter der Bilder beim betrachten der Slideshow weitergezählt wird. Nutze diese Erweiterung.
http://www.4homepages.de/forum/index.php?topic=20461.msg139761#msg139761

Ich denke damit sollte ich alles haben.

Bei Fragen wendet Euch wie immer Vertrauensvoll an mich Smile Sofern es Probleme gibt werde ich die hier im Forum lösen.
« Last Edit: May 26, 2010, 12:24:42 PM by rinaldos » Logged
mawenzi
Moderator
4images Guru
*****
Offline Offline

Posts: 4500

Thank You
-Given: 36
-Receive: 121


View Profile
« Reply #1 on: August 13, 2009, 10:24:21 PM »

... die erste Slideshow für 4images mit Image-Counter, war immer ein Manko aller anderen Slideshows ...
... mit den Vorschaubildern sieht die Slideshow Klasse aus ...
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) ...
Sumale.my
Addicted member
******
Offline Offline

Posts: 1764

Thank You
-Given: 164
-Receive: 77

Neverdie


View Profile
« Reply #2 on: August 13, 2009, 11:14:54 PM »

Super Arbeit! Habe es gleich in meiner Liste aufgenommen!
http://www.4homepages.de/forum/index.php?topic=24888.msg136127#msg136127
Logged
rinaldos
Guest
« Reply #3 on: August 14, 2009, 12:43:46 AM »

Um der Slideshow ein paar mehr Möglichkeiten zu geben, musste ich gerade den Code ändern. Der PHP Code ist um die Konfigurationseinstellungen gekürzt worden. Weiterhin muss nun eine Konfigurationsdatei erstellt werden. Nun ist es für jedermann einfach, seine Slideshow nach seinen Bedürfnissen anzupassen Smile
Hatte den Konfigurator bei Highslide JS zu spät gesehen Sad
Mit dem Konfigurator ist es nun möglich, viele Optionen und Variablen zu ändern.

Wichtig ist nur, das folgende Zeilen in der Java Konfigurationsdatei erhalten bleiben
1
2
3
var miniGalleryOptions1 = {
thumbnailId: 'thumb1'
}
Ohne diese Zeilen findet das Script nicht die in der PHP Datei generierte Slideshow.

Sorry für eine kurze Änderung des o.a. Codes Smile
Logged
Hagen-Roderich
Full Member
***
Offline Offline

Posts: 127

Thank You
-Given: 18
-Receive: 9


View Profile WWW
« Reply #4 on: August 14, 2009, 11:42:06 AM »

Danke für den MOD.
Jetzt kann ich mir den Photopreview Hack sparen und hab eine Slideshow mit dazu.

Da ich ich alles stur nach Anleitung gemacht habe:
Quote  [Expand]
Nun im 4images ROOT Verzeichnis die Datei counterudate.php erstellen
Hat der Bildcounter nicht gefunzt. counterudate.php -> counterupdate.php
Logged

rinaldos
Guest
« Reply #5 on: August 14, 2009, 11:59:08 AM »

Smile Dann werde ich mal meine schnellen Rechtschreibfehler korrigieren Smile
Aber der Photo Preview Hack ist ja etwas ganz anderes. Der ist für die Detailseite, die Slideshow ist für die Kategorie / Such und Album Seite


Gruß
Logged
Hagen-Roderich
Full Member
***
Offline Offline

Posts: 127

Thank You
-Given: 18
-Receive: 9


View Profile WWW
« Reply #6 on: August 14, 2009, 12:57:51 PM »

Mit dem Firefox funzt die Slideshow. Mit dem IE 6 (ja ich weiß) gibt es ein Javascriptproblem sowohl mit der Mobilserverversion (Testumgebung) als auch in der Galerie. Die Slieshow startet nicht. Die oben aufgeführten Demos funzen aber mit dem IE 6.
4Images V. 1.7.6
Logged

rinaldos
Guest
« Reply #7 on: August 14, 2009, 01:03:47 PM »

Dann hast du sicherlich ein Problem mit den Pfaden, denke ich mal. Welche Version hattest du installiert, die derzeitige oder mein Post davor, wo ich noch keine Konfigurationsdatei hatte?

Gib mir doch bitte einmal einen Link
Logged
Hagen-Roderich
Full Member
***
Offline Offline

Posts: 127

Thank You
-Given: 18
-Receive: 9


View Profile WWW
« Reply #8 on: August 14, 2009, 01:10:54 PM »

Benutzte MOD Version: V 2 (mit Konfigurationsdatei)
Link:

Andere IE Versionen konnte ich noch nicht testen.
« Last Edit: October 21, 2009, 01:26:54 PM by Hagen-Roderich » Logged

rinaldos
Guest
« Reply #9 on: August 14, 2009, 01:17:46 PM »

Danke für die Info, also ich habe gerade mal geschaut, mit dem Safari klappt es einwandfrei und FF auch. Mit dem IE 7 konnte ich es bei mir leider nur testen, da ich alles auf einem MAC habe und den IE 7 nur in einer VM Umgebung.

Du schreibst das es bei mir mit dem IE6 klappt? Wenn ich mir deinen Quelltext anschaue, dann stimmt alles. Welche Fehlermeldung kommt denn beim IE6?

Hast du die Konfig Datei verändert?
Logged
Hagen-Roderich
Full Member
***
Offline Offline

Posts: 127

Thank You
-Given: 18
-Receive: 9


View Profile WWW
« Reply #10 on: August 14, 2009, 01:37:18 PM »

IE7 funzt? Wenn ja, bleibt mir ja noch das: http://www.golem.de/showhigh2.php?file=/0908/68840.html&wort[]=internet&wort[]=explorer  Laughing

Konfig habe ich geändert und beigefügt.
Im IE6 steht nur links unten "Fehler auf der Seite" und gehe ich mit der Maus über den Text/Link "Slideshow" steht "javascript:;" mit so einem kleinen Fehlersymbol.

* highslide_cfg_slide.txt (1.79 KB - downloaded 11 times.)
Logged

rinaldos
Guest
« Reply #11 on: August 14, 2009, 01:51:33 PM »

wie sieht es denn mit meiner geposteten Konfig aus? klappt die denn?

Du hast hier diesen Wert drinne:
1
wrapperClassName: 'borderless floating-caption',
vielleicht sollte da am Ende ein Semikolon stehen.


Logged
Hagen-Roderich
Full Member
***
Offline Offline

Posts: 127

Thank You
-Given: 18
-Receive: 9


View Profile WWW
« Reply #12 on: August 14, 2009, 02:08:30 PM »

Original Konfig und Semikolon haben nicht geholfen.
Hab ich schon erwähnt das ich keine Änderungen an den Dateien lightbox.html, lightbox.php,search.html und search.php vorgenommen habe?  Embarassed
Da bisher keine Beschreibung und Schlüsselworte gesetzt sind -> keine Suchanpssung
Nur 1 User -> keine Lightbox

Update:
Hab die restlichen Dateien jetzt mal angepasst. Hat nix gebracht.

Update 2:
Hab das jetzt nochmal mit einer sauberen Mobilserverversion getestet. Immer noch das gleiche Problem.
Sobald ich den Code in die categories.php eingebe, kommt der Javascriptfehler.
Hab dann mal die Zeile geändert:
1
$highslide_js .= "\n<link rel=\"stylesheet\" type=\"text/css\" href=\"".ROOT_PATH."js/highslide/highslide.css\" />\n";
in
1
$highslide_js .= "\n<link rel=\"stylesheet\" type=\"text/css\" href=\"".ROOT_PATH."js/highslide/highslide-ie6.css\" />\n";
Hat aber auch nix gebracht.
« Last Edit: August 14, 2009, 03:31:51 PM by Hagen-Roderich » Logged

rinaldos
Guest
« Reply #13 on: August 14, 2009, 02:30:16 PM »

Gib mir doch bitte mal per PM einen ftp Zugang .....
Gruß

P.S. Die anderen Dateien sind auch nicht zwingend erforderlich
Logged
webbug
Newbie
*
Offline Offline

Posts: 33

Thank You
-Given: 1
-Receive: 0


View Profile
« Reply #14 on: August 16, 2009, 04:33:14 PM »

Hi, I dont know German but I managed to do the translation from Google.

I have a problem in the search page, the slideshow works perfectly but I get the following error:

Notice: Undefined variable: highslide_js in C:\wamp\www\uaetrips\portal2\search.php on line 334

There is no issue with the category pages.

Thanks
« Last Edit: August 16, 2009, 10:40:39 PM by webbug » Logged
Pages: [1] 2 3 4 5 » »» 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.129 seconds with 20 queries.