Author Topic: [MOD]Slideshow mit Highslide JS  (Read 90142 times)

0 Members and 1 Guest are viewing this topic.

rinaldos

  • Guest
[MOD]Slideshow mit Highslide JS
« 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
Code: [Select]
{if highslide}
{highslide_link}
{highslide_js}
{slideshow_highslide}
{endif highslide}

lightbox.html (am besten in den Abschnitt {if thumbnails} / {endif thumbnails})
Code: [Select]
{highslide_link}
{highslide_js}
{slideshow_highslide}

categories.html (am besten vor den Abschnitt {if categories}  / {endif categories})
Code: [Select]
{highslide_link}
{highslide_js}
{slideshow_highslide}

füge in folgenden Dateien, jeweils vor
Code: [Select]
//-----------------------------------------------------
//--- Clickstream -------------------------------------
//-----------------------------------------------------

folgenden Code ein:

categories.php

// [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



// [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


// [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

Code: [Select]
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 :-) Sofern es Probleme gibt werde ich die hier im Forum lösen.
« Last Edit: May 26, 2010, 12:24:42 PM by rinaldos »

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: [MOD]Slideshow mit Highslide JS
« 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 ...
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) ...

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD]Slideshow mit Highslide JS
« 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

rinaldos

  • Guest
Re: [MOD]Slideshow mit Highslide JS
« 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 :-)
Hatte den Konfigurator bei Highslide JS zu spät gesehen :-(
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
Code: [Select]
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 :-)

Offline Hagen-Roderich

  • Full Member
  • ***
  • Posts: 127
    • View Profile
    • Hof Jokers
Re: [MOD]Slideshow mit Highslide JS
« 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
Nun im 4images ROOT Verzeichnis die Datei counterudate.php erstellen
Hat der Bildcounter nicht gefunzt. counterudate.php -> counterupdate.php

rinaldos

  • Guest
Re: [MOD]Slideshow mit Highslide JS
« Reply #5 on: August 14, 2009, 11:59:08 AM »
:-) Dann werde ich mal meine schnellen Rechtschreibfehler korrigieren :-)
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ß

Offline Hagen-Roderich

  • Full Member
  • ***
  • Posts: 127
    • View Profile
    • Hof Jokers
Re: [MOD]Slideshow mit Highslide JS
« 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

rinaldos

  • Guest
Re: [MOD]Slideshow mit Highslide JS
« 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

Offline Hagen-Roderich

  • Full Member
  • ***
  • Posts: 127
    • View Profile
    • Hof Jokers
Re: [MOD]Slideshow mit Highslide JS
« 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 »

rinaldos

  • Guest
Re: [MOD]Slideshow mit Highslide JS
« 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?

Offline Hagen-Roderich

  • Full Member
  • ***
  • Posts: 127
    • View Profile
    • Hof Jokers
Re: [MOD]Slideshow mit Highslide JS
« 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  :lol:

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.

rinaldos

  • Guest
Re: [MOD]Slideshow mit Highslide JS
« 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:
Code: [Select]
wrapperClassName: 'borderless floating-caption',
vielleicht sollte da am Ende ein Semikolon stehen.



Offline Hagen-Roderich

  • Full Member
  • ***
  • Posts: 127
    • View Profile
    • Hof Jokers
Re: [MOD]Slideshow mit Highslide JS
« 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?  :oops:
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:
Code: [Select]
$highslide_js .= "\n<link rel=\"stylesheet\" type=\"text/css\" href=\"".ROOT_PATH."js/highslide/highslide.css\" />\n";in
Code: [Select]
$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 »

rinaldos

  • Guest
Re: [MOD]Slideshow mit Highslide JS
« 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

Offline webbug

  • Newbie
  • *
  • Posts: 33
    • View Profile
Re: [MOD]Slideshow mit Highslide JS
« 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 »