4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Releases & Support) => Topic started by: rinaldos on August 13, 2009, 10:07:15 PM

Title: [MOD]Slideshow mit Highslide JS
Post by: rinaldos 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.
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: mawenzi 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 ...
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: qBass17 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
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos 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 :-)
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Hagen-Roderich 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
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos 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ß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Hagen-Roderich 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
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos 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
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Hagen-Roderich on August 14, 2009, 01:10:54 PM
Benutzte MOD Version: V 2 (mit Konfigurationsdatei)
Link:

Andere IE Versionen konnte ich noch nicht testen.
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos 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?
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Hagen-Roderich 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.
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos 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.


Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Hagen-Roderich 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.
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos 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
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: webbug 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
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on August 16, 2009, 05:24:05 PM
Hi, do you have an URL accesed via Internet? I think there is a Problem with the path. What is your root Folder from 4images?
The config file uses /js/... maybe you have to adjust this path.
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: webbug on August 16, 2009, 10:45:11 PM
The problem was with the highslide_cfg_slide.js, my bad I missed it due to some issues with translation.

Now everything works perfectly except for the following message on the search page:

Notice: Undefined variable: highslide_js in C:\wamp\www\uaetrips\portal2\search.php on line 334
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on August 17, 2009, 05:58:16 AM
Hi,
in Global.php you can turn off those messages.....
simply uncomment this
Code: [Select]
error_reporting(E_ERROR | E_WARNING | E_PARSE);

to
Code: [Select]
// error_reporting(E_ERROR | E_WARNING | E_PARSE);

Thanks for your reply :-)
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Rembrandt on August 17, 2009, 07:40:26 AM
Morgen!
...
@vano hat heute in der search.php das eingefügt '$highslide_js = "";' damit sollte die fehlermeldung nicht mehr kommen.

mfg Andi
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Hagen-Roderich on August 18, 2009, 09:16:29 AM
IE6 Problem gelöst, war mein Fehler  :oops:
Die Datei "highslide_cfg_slide.js" war nicht in UTF - 8 von mir gespeichert wurden.
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: ddr94 on August 23, 2009, 01:36:02 PM
Hi!
Eine Frage:
Geht es auch so, sodass bei der Slideshow die Beschreibung des Bildes angezeigt wird? So wird nur der Name angezeigt, was sehr schade ist... :(
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on August 23, 2009, 01:47:30 PM
Hi,
naja das lesen einer Beschreibung dauert länger als das Bild angegezigt wird, und je nach Beschreibung sind das schonmal viele Zeilen. Dann wird die Darstellung des Bildes verkleinert. Dann ist es meines Erachtens nach keine Slideshow mehr. wie dem auch sei.

ändere in den PHP Dateien die MYSQL Abfrage:
finde
Code: [Select]
$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")."

ersetze mit

Code: [Select]
$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, i.image_description ".$additional_sql.", c.cat_name".get_user_table_field(", u.", "user_name")."

und finde
Code: [Select]
   $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_media_file']."\"></a>\n";

ersetze mit
Code: [Select]
   $slideshow_highslide .= "<a class=\"highslide\" id=\"gallery\" href=\"./".MEDIA_DIR."/".$image_row['cat_id']."/".$image_row['image_media_file']."\" title=\"".$image_row['image_description']."\" onclick=\"return hs.expand(this, miniGalleryOptions1)\"><img src=\"".ROOT_PATH.THUMB_DIR."/".$image_row['cat_id']."/".$image_row['image_media_file']."\"></a>\n";

Was ist geändert. in der SQL Anweisung wurde i.image_description hinzugefügt und in der slideshow_highslide Variabel wurde
Code: [Select]
title=\"".$image_row['image_name']."\"
gegen

Code: [Select]
title=\"".$image_row['image_description']."\"
ausgetauscht


Gruß
Ingo
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: ddr94 on August 23, 2009, 02:17:36 PM
Geht auch der Bildname und die Bildbeschreibung nebeneinander? Danke im Voraus =)

PS. Ich habe noch ein Problem... In der Suchfunktion wird der Button "Slideshow" nicht angezeigt, obwohl ich die Dateien search.html und search.php entsprechen editiert habe. Woran könnte es liegen?
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on August 23, 2009, 02:40:33 PM
Es muss ein Button Diashow / Slideshow sein, Suchfunktion geht nicht, bzw ist nicht von mir. Er Zeigt ja auch nur den Button Diashow wenn Bilder gefunden werden.

Das du die Frage stellst, ob Bildname und Beschreibung nebeneinander geht war klar.  :lol:

Die Zeile title= .... gegen das austauschen
Code: [Select]
title=\"Name:&nbsp;".$image_row['image_name']."&nbsp<br>Beschreibung:&nbsp;".$image_row['image_description']."\"

Gruß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: ddr94 on August 23, 2009, 03:03:51 PM
Es muss ein Button Diashow / Slideshow sein, Suchfunktion geht nicht, bzw ist nicht von mir. Er Zeigt ja auch nur den Button Diashow wenn Bilder gefunden werden.

Das du die Frage stellst, ob Bildname und Beschreibung nebeneinander geht war klar.  :lol:

Die Zeile title= .... gegen das austauschen
Code: [Select]
title=\"Name:&nbsp;".$image_row['image_name']."&nbsp<br>Beschreibung:&nbsp;".$image_row['image_description']."\"

Gruß

Also ich meinte jetzt nicht irgendeine Bilddatei, sondern das Wort "Slideshow" ;) Natürlich bei gefundenen Bildern. Wird nicht angezeigt. In Kategorienansicht schon.

Für das Zweite: danke schön! :)

EDIT: Ach f*ck... Sehe ich gerade jetzt. Ich meinte natürlich nicht den Button "Suchfunktion", sondern "Slideshow." Sry für die Verwirrung. Habe es im obigen Beitrag korrigiert.
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on August 23, 2009, 03:08:23 PM
Ich mutmasse nun einmal. Da du bisher der einzige bist, bei dem es mit der Suche nicht klappt, ist irgendwie der Code nicht richtig im Template oder in der php Datei eingesetzt. Hänge doch mal bitte deine search.html und search.php hier dran....
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: ddr94 on August 23, 2009, 03:18:08 PM
Lies bitte meine Korrektur, habe mich vertan :P

Aber das mit dem Anhängen war eine gute Idee, dann hänge ich mal die beiden Dateien an:

nach dem Herunterladen bitte ".txt" entfernen ;P
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on August 23, 2009, 03:35:20 PM
Hi,
ich habe nun meinen bzw deinen Code mal in meine Suche eingefügt:
http://4images_1.rinaldos.homeip.net/search.php

und wenn ich mit dreimal *** suche findet er alle Bilder und die Diashow klappt. Ich tippe mal du hast noch irgendwo einen anderen Fehler. Gib mir dochmal einen Link von Deiner HP

Gruß

Title: Re: [MOD]Slideshow mit Highslide JS
Post by: ddr94 on August 23, 2009, 03:41:47 PM
Habe gerade eben den Fehler behoben, die Ursache war um eine Zeile (aus Versehen) zu früh eingefügter Text in die search.php-Datei.

Aber trotzdem vielen Dank für deine Hilfe! :)
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on August 23, 2009, 03:59:36 PM
????
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: bergblume on September 02, 2009, 10:33:18 AM
welchen code muss ich in meine details.php einfügen wenn ich innerhalb der detailseite mehrere bilder habe und die als slideshow angezeigt bekommen möchte?
gruss, bergblume
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on September 05, 2009, 11:48:03 AM
Hi,
wenn ich das richtig verstehe, willst du von der Detailseite die Diashow der Kategorie aufrufen?

LG
ingo
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: bergblume on September 05, 2009, 04:27:28 PM
hallo ingo,
danke der nachfrage... ich konnte es mittlerweile selbst lösen... meine highslide.js hat nicht ganz gepasst...

allerdings schaut es nun in den kategorien so bei mir aus  8O  http://www.tourendatenbank.com/categories.php?cat_id=131 (sprich erst die slideshow und dann die verlinkten thumbnails darunter... keine ahnung was hier schief gelaufen ist_)
gruss,
bergblume
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on September 05, 2009, 04:34:09 PM
Du musst mal schauen da gibt es etwas mit dem hidden container

  $slideshow_highslide = "<div class=\"highslide-gallery hidden-container\" bgcolor=\black\">\n";

Vielleicht hast du die css oder einen Fehler im php. Der Hiddencontainer ist dafür da, damit du diese thumbs nicht siehst. Ich würde dort mal den Fehler suche. Kann auch sein das du eine falsche Option im Java mit übernommen hast.

Suche mal nach den Variabeln

var miniGalleryOptions1 = {
thumbnailId: 'thumb1'

Die müssen in der php Datei sich wiederspiegeln.......

Gruß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: mikegreece on October 24, 2009, 04:20:33 PM
hi there and thank you very much for all info ..
is ther ea wayto have the onfly watermark on slideshow images too ?

thnx
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on October 24, 2009, 05:04:10 PM
Welcome,
no there is no way. It's only a slideshow.

Gruß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: kubiczek on October 24, 2009, 10:36:43 PM
Hallo,

Funktioniert einwandfrei,

nur komme ich mit der highslide.css nicht so richtig zu recht.

was muss ich machen damit der hintergrung "abgedunkelt" wird?

http://grosspeterwitz.org/gp/categories.php?cat_id=11


 highslide.css

Code: [Select]
.highslide-container div {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide-container table {
background: none;
}
.highslide {
outline: none;
text-decoration: none;
}
.highslide img {
border: 2px solid silver;
}
.highslide:hover img {
border-color: gray;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide-gallery .highslide-active-anchor img {
border-color: black;
visibility: visible;
cursor: default;
}
.highslide-image {
border-width: 2px;
border-style: solid;
border-color: white;
background: gray;
}
.highslide-wrapper, .highslide-outline {
background: white;
}
.glossy-dark {
background: #111;
}

.highslide-image-blur {
}
.highslide-number {
font-weight: bold;
color: gray;
font-size: .9em;
}
.highslide-caption {
display: none;
font-size: 1em;
padding: 5px;
/*background: white;*/
}
.highslide-heading {
display: none;
font-weight: bold;
margin: 0.4em;
}
.highslide-dimming {
position: absolute;
background: black;
}
a.highslide-full-expand {
   background: url(graphics/fullexpand.gif) no-repeat;
   display: block;
   margin: 0 10px 10px 0;
   width: 34px;
   height: 34px;
}
.highslide-loading {
display: block;
color: black;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border: 1px solid white;
background-color: white;
padding-left: 22px;
background-image: url(graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-move, .highslide-move * {
cursor: move;
}

.highslide-viewport {
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
background: none;
left: 0;
top: 0;
}
.highslide-overlay {
display: none;
}
.hidden-container {
display: none;
}
/* Example of a semitransparent, offset closebutton */
.closebutton {
position: relative;
top: -15px;
left: 15px;
width: 30px;
height: 30px;
cursor: pointer;
background: url(graphics/close.png);
/* NOTE! For IE6, you also need to update the highslide-ie6.css file. */
}

/*****************************************************************************/
/* Thumbnail boxes for the galleries.                                        */
/* Remove these if you are not using a gallery.                              */
/*****************************************************************************/
.highslide-gallery ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.highslide-gallery ul li {
display: block;
position: relative;
float: left;
width: 106px;
height: 106px;
border: 1px solid silver;
background: #ededed;
margin: 2px;
line-height: 0;
overflow: hidden;
}
.highslide-gallery ul a {
position: absolute;
top: 50%;
left: 50%;
}
.highslide-gallery ul img {
  position: relative;
top: -50%;
left: -50%;
}
html>/**/body .highslide-gallery ul li {
display: table;
text-align: center;
}
html>/**/body .highslide-gallery ul li {
text-align: center;
}
html>/**/body .highslide-gallery ul a {
position: static;
display: table-cell;
vertical-align: middle;
}
html>/**/body .highslide-gallery ul img {
position: static;
}

/*****************************************************************************/
/* Controls for the galleries.     */
/* Remove these if you are not using a gallery     */
/*****************************************************************************/
.highslide-controls {
width: 195px;
height: 40px;
background: url(graphics/controlbar-white.gif) 0 -90px no-repeat;
margin: 20px 15px 10px 0;
}
.highslide-controls ul {
position: relative;
left: 15px;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
background: url(graphics/controlbar-white.gif) right -90px no-repeat;

}
.highslide-controls li {
float: left;
padding: 5px 0;
margin:0;
list-style: none;
}
.highslide-controls a {
background-image: url(graphics/controlbar-white.gif);
display: block;
float: left;
height: 30px;
width: 30px;
outline: none;
}
.highslide-controls a.disabled {
cursor: default;
}
.highslide-controls a.disabled span {
cursor: default;
}
.highslide-controls a span {
/* hide the text for these graphic buttons */
display: none;
cursor: pointer;
}


/* The CSS sprites for the controlbar - see http://www.google.com/search?q=css+sprites */
.highslide-controls .highslide-previous a {
background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
background-position: 0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
background-position: -60px -30px;
}
.highslide-controls .highslide-next a {
background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
background-position: -150px -60px !important;
}
.highslide-controls .highslide-close a {
background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
background-position: -180px -30px;
}

/*****************************************************************************/
/* Styles for the HTML popups     */
/* Remove these if you are not using Highslide HTML     */
/*****************************************************************************/
.highslide-maincontent {
display: none;
}
.highslide-html {
background-color: white;
}
.highslide-html-content {
display: none;
width: 400px;
padding: 0 5px 5px 5px;
}
.highslide-header {
padding-bottom: 5px;
}
.highslide-header ul {
margin: 0;
padding: 0;
text-align: right;
}
.highslide-header ul li {
display: inline;
padding-left: 1em;
}
.highslide-header ul li.highslide-previous, .highslide-header ul li.highslide-next {
display: none;
}
.highslide-header a {
font-weight: bold;
color: gray;
text-transform: uppercase;
text-decoration: none;
}
.highslide-header a:hover {
color: black;
}
.highslide-header .highslide-move a {
cursor: move;
}
.highslide-footer {
height: 16px;
}
.highslide-footer .highslide-resize {
display: block;
float: right;
margin-top: 5px;
height: 11px;
width: 11px;
background: url(graphics/resize.gif) no-repeat;
}
.highslide-footer .highslide-resize span {
display: none;
}
.highslide-body {
}
.highslide-resize {
cursor: nw-resize;
}

/*****************************************************************************/
/* Styles for the Individual wrapper class names. */
/* See www.highslide.com/ref/hs.wrapperClassName */
/* You can safely remove the class name themes you don't use */
/*****************************************************************************/

/* hs.wrapperClassName = 'draggable-header' */
.draggable-header .highslide-header {
height: 18px;
border-bottom: 1px solid #dddddd;
}
.draggable-header .highslide-heading {
position: absolute;
margin: 2px 0.4em;
}

.draggable-header .highslide-header .highslide-move {
cursor: move;
display: block;
height: 16px;
position: absolute;
right: 24px;
top: 0;
width: 100%;
z-index: 1;
}
.draggable-header .highslide-header .highslide-move * {
display: none;
}
.draggable-header .highslide-header .highslide-close {
position: absolute;
right: 2px;
top: 2px;
z-index: 2;
padding: 0;
}
.draggable-header .highslide-header .highslide-close a {
display: block;
height: 16px;
width: 16px;
background-image: url(graphics/closeX.png);
}
.draggable-header .highslide-header .highslide-close a:hover {
background-position: 0 16px;
}
.draggable-header .highslide-header .highslide-close span {
display: none;
}
.draggable-header .highslide-maincontent {
padding-top: 1em;
}

/* hs.wrapperClassName = 'titlebar' */
.titlebar .highslide-header {
height: 18px;
border-bottom: 1px solid #dddddd;
}
.titlebar .highslide-heading {
position: absolute;
margin: 1px 0.4em;
color: #666666;
}

.titlebar .highslide-header .highslide-move {
cursor: move;
display: block;
height: 16px;
position: absolute;
right: 24px;
top: 0;
width: 100%;
z-index: 1;
}
.titlebar .highslide-header .highslide-move * {
display: none;
}
.titlebar .highslide-header li {
position: relative;
top: 3px;
z-index: 2;
padding: 0 0 0 1em;
}
.titlebar .highslide-maincontent {
padding-top: 1em;
}

/* hs.wrapperClassName = 'no-footer' */
.no-footer .highslide-footer {
display: none;
}

/* hs.wrapperClassName = 'wide-border' */
.wide-border {
background: white;
}
.wide-border .highslide-image {
border-width: 10px;
}
.wide-border .highslide-caption {
padding: 0 10px 10px 10px;
}

/* hs.wrapperClassName = 'borderless' */
.borderless .highslide-image {
border: none;
}
.borderless .highslide-caption {
border-bottom: 1px solid white;
border-top: 1px solid white;
background: silver;
}

/* hs.wrapperClassName = 'outer-glow' */
.outer-glow {
background: #444;
}
.outer-glow .highslide-image {
border: 5px solid #444444;
}
.outer-glow .highslide-caption {
border: 5px solid #444444;
border-top: none;
padding: 5px;
background-color: gray;
}

/* hs.wrapperClassName = 'colored-border' */
.colored-border {
background: white;
}
.colored-border .highslide-image {
border: 2px solid green;
}
.colored-border .highslide-caption {
border: 2px solid green;
border-top: none;
}

/* hs.wrapperClassName = 'dark' */
.dark {
background: #111;
}
.dark .highslide-image {
border-color: black black #202020 black;
background: gray;
}
.dark .highslide-caption {
color: white;
background: #111;
}
.dark .highslide-controls,
.dark .highslide-controls ul,
.dark .highslide-controls a {
background-image: url(graphics/controlbar-black-border.gif);
}

/* hs.wrapperClassName = 'floating-caption' */
.floating-caption .highslide-caption {
position: absolute;
padding: 1em 0 0 0;
background: none;
color: white;
border: none;
font-weight: bold;
}

/* hs.wrapperClassName = 'controls-in-heading' */
.controls-in-heading .highslide-heading {
color: gray;
font-weight: bold;
height: 20px;
overflow: hidden;
cursor: default;
padding: 0 0 0 22px;
margin: 0;
background: url(graphics/icon.gif) no-repeat 0 1px;
}
.controls-in-heading .highslide-controls {
width: 105px;
height: 20px;
position: relative;
margin: 0;
top: -23px;
left: 7px;
background: none;
}
.controls-in-heading .highslide-controls ul {
position: static;
height: 20px;
background: none;
}
.controls-in-heading .highslide-controls li {
padding: 0;
}
.controls-in-heading .highslide-controls a {
background-image: url(graphics/controlbar-white-small.gif);
height: 20px;
width: 20px;
}

.controls-in-heading .highslide-controls .highslide-move {
display: none;
}

.controls-in-heading .highslide-controls .highslide-previous a {
background-position: 0 0;
}
.controls-in-heading .highslide-controls .highslide-previous a:hover {
background-position: 0 -20px;
}
.controls-in-heading .highslide-controls .highslide-previous a.disabled {
background-position: 0 -40px !important;
}
.controls-in-heading .highslide-controls .highslide-play a {
background-position: -20px 0;
}
.controls-in-heading .highslide-controls .highslide-play a:hover {
background-position: -20px -20px;
}
.controls-in-heading .highslide-controls .highslide-play a.disabled {
background-position: -20px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-pause a {
background-position: -40px 0;
}
.controls-in-heading .highslide-controls .highslide-pause a:hover {
background-position: -40px -20px;
}
.controls-in-heading .highslide-controls .highslide-next a {
background-position: -60px 0;
}
.controls-in-heading .highslide-controls .highslide-next a:hover {
background-position: -60px -20px;
}
.controls-in-heading .highslide-controls .highslide-next a.disabled {
background-position: -60px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-full-expand a {
background-position: -100px 0;
}
.controls-in-heading .highslide-controls .highslide-full-expand a:hover {
background-position: -100px -20px;
}
.controls-in-heading .highslide-controls .highslide-full-expand a.disabled {
background-position: -100px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-close a {
background-position: -120px 0;
}
.controls-in-heading .highslide-controls .highslide-close a:hover {
background-position: -120px -20px;
}

/*****************************************************************************/
/* Styles for text based controls.                     */
/* You can safely remove this if you don't use text based controls */
/*****************************************************************************/

.text-controls .highslide-controls {
width: auto;
height: auto;
margin: 0;
text-align: center;
background: none;
}
.text-controls ul {
position: static;
background: none;
height: auto;
left: 0;
}
.text-controls .highslide-move {
display: none;
}
.text-controls li {
    background-image: url(graphics/controlbar-text-buttons.png);
background-position: right top !important;
padding: 0;
margin-left: 15px;
display: block;
width: auto;
}
.text-controls a {
    background: url(graphics/controlbar-text-buttons.png) no-repeat;
    background-position: left top !important;
    position: relative;
    left: -10px;
display: block;
width: auto;
height: auto;
text-decoration: none !important;
}
.text-controls a span {
background: url(graphics/controlbar-text-buttons.png) no-repeat;
    margin: 1px 2px 1px 10px;
display: block;
    min-width: 4em;
    height: 18px;
    line-height: 18px;
padding: 1px 0 1px 18px;
    color: #333;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
}
.text-controls .highslide-next {
margin-right: 1em;
}
.text-controls .highslide-full-expand a span {
min-width: 0;
margin: 1px 0;
padding: 1px 0 1px 10px;
}
.text-controls .highslide-close a span {
min-width: 0;
}
.text-controls a:hover span {
color: black;
}
.text-controls a.disabled span {
color: #999;
}

.text-controls .highslide-previous span {
background-position: 0 -40px;
}
.text-controls .highslide-previous a.disabled {
background-position: left top !important;
}
.text-controls .highslide-previous a.disabled span {
background-position: 0 -140px;
}
.text-controls .highslide-play span {
background-position: 0 -60px;
}
.text-controls .highslide-play a.disabled {
background-position: left top !important;
}
.text-controls .highslide-play a.disabled span {
background-position: 0 -160px;
}
.text-controls .highslide-pause span {
background-position: 0 -80px;
}
.text-controls .highslide-next span {
background-position: 0 -100px;
}
.text-controls .highslide-next a.disabled {
background-position: left top !important;
}
.text-controls .highslide-next a.disabled span {
background-position: 0 -200px;
}
.text-controls .highslide-full-expand span {
background: none;
}
.text-controls .highslide-full-expand a.disabled {
background-position: left top !important;
}
.text-controls .highslide-close span {
background-position: 0 -120px;
}


/*****************************************************************************/
/* Styles for the thumbstrip.                     */
/* See www.highslide.com/ref/hs.addSlideshow     */
/* You can safely remove this if you don't use a thumbstrip */
/*****************************************************************************/

.highslide-thumbstrip {
height: 100%;
}
.highslide-thumbstrip div {
overflow: hidden;
}
.highslide-thumbstrip table {
position: relative;
padding: 0;
border-collapse: collapse;
}
.highslide-thumbstrip td {
padding: 1px;
/*text-align: center;*/
}
.highslide-thumbstrip a {
outline: none;
}
.highslide-thumbstrip img {
display: block;
border: 1px solid gray;
margin: 0 auto;
}
.highslide-thumbstrip .highslide-active-anchor img {
visibility: visible;
}
.highslide-thumbstrip .highslide-marker {
position: absolute;
width: 0;
height: 0;
border-width: 0;
border-style: solid;
border-color: transparent; /* change this to actual background color in highslide-ie6.css */
}
.highslide-thumbstrip-horizontal div {
width: auto;
/* width: 100% breaks in small strips in IE */
}
.highslide-thumbstrip-horizontal .highslide-scroll-up {
display: none;
position: absolute;
top: 3px;
left: 3px;
width: 25px;
height: 42px;
}
.highslide-thumbstrip-horizontal .highslide-scroll-up div {
margin-bottom: 10px;
cursor: pointer;
background: url(graphics/scrollarrows.png) left center no-repeat;
height: 42px;
}
.highslide-thumbstrip-horizontal .highslide-scroll-down {
display: none;
position: absolute;
top: 3px;
right: 3px;
width: 25px;
height: 42px;
}
.highslide-thumbstrip-horizontal .highslide-scroll-down div {
margin-bottom: 10px;
cursor: pointer;
background: url(graphics/scrollarrows.png) center right no-repeat;
height: 42px;
}
.highslide-thumbstrip-horizontal table {
margin: 2px 0 10px 0;
}
.highslide-viewport .highslide-thumbstrip-horizontal table {
margin-left: 10px;
}
.highslide-thumbstrip-horizontal img {
width: auto;
height: 40px;
}
.highslide-thumbstrip-horizontal .highslide-marker {
top: 47px;
border-left-width: 6px;
border-right-width: 6px;
border-bottom: 6px solid gray;
}
.highslide-viewport .highslide-thumbstrip-horizontal .highslide-marker {
margin-left: 10px;
}
.dark .highslide-thumbstrip-horizontal .highslide-marker, .highslide-viewport .highslide-thumbstrip-horizontal .highslide-marker {
border-bottom-color: white !important;
}

.highslide-thumbstrip-vertical-overlay {
/*overflow: hidden !important;*/
}
.highslide-thumbstrip-vertical div {
height: 100%;
}
.highslide-thumbstrip-vertical a {
display: block;
}
.highslide-thumbstrip-vertical .highslide-scroll-up {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 25px;
}
.highslide-thumbstrip-vertical .highslide-scroll-up div {
margin-left: 10px;
cursor: pointer;
background: url(graphics/scrollarrows.png) top center no-repeat;
height: 25px;
}
.highslide-thumbstrip-vertical .highslide-scroll-down {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25px;
}
.highslide-thumbstrip-vertical .highslide-scroll-down div {
margin-left: 10px;
cursor: pointer;
background: url(graphics/scrollarrows.png) bottom center no-repeat;
height: 25px;
}
.highslide-thumbstrip-vertical table {
margin: 10px 0 0 10px;
}
.highslide-thumbstrip-vertical img {
max-width: 60px;
}
.highslide-thumbstrip-vertical .highslide-marker {
left: 0;
margin-top: 8px;
border-top-width: 6px;
border-bottom-width: 6px;
border-left: 6px solid gray;
}
.dark .highslide-thumbstrip-vertical .highslide-marker, .highslide-viewport .highslide-thumbstrip-vertical .highslide-marker {
border-left-color: white;
}

.highslide-viewport .highslide-thumbstrip-float {
overflow: auto;
}
.highslide-thumbstrip-float ul {
margin: 2px 0;
padding: 0;
}
.highslide-thumbstrip-float li {
display: block;
height: 60px;
margin: 0 2px;
list-style: none;
float: left;
}
.highslide-thumbstrip-float img {
display: inline;
border-color: silver;
max-height: 56px;
}
.highslide-thumbstrip-float .highslide-active-anchor img {
border-color: black;
}
.highslide-thumbstrip-float .highslide-scroll-up div, .highslide-thumbstrip-float .highslide-scroll-down div {
display: none;
}
.highslide-thumbstrip-float .highslide-marker {
display: none;
}

gruß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Rembrandt on October 25, 2009, 05:26:33 AM
Hi!
...
was muss ich machen damit der hintergrung "abgedunkelt" wird?...
steht eigentlich alles schon im eingangs post.
in deiner style.css fügst du das hinzu:
Code: [Select]
.highslide-dimming {
background: black;
}

in der Konfigurationsdatei deiner Slideshow fügst du das hinzu:
Code: [Select]
hs.dimmingOpacity = 0.75;
die werte kannst du nach belieben anpassen, alles weiter kannst du hier nachlesen (http://highslide.com/ref/hs.dimmingOpacity).

mfg Andi
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: kubiczek on October 25, 2009, 02:45:18 PM
besten dank,

der fehler lag

.highslide-dimming {
   position: absolute;
   background: black;
}

habe position: absolute;  gelöscht und schon funzt es

danke
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: Indianer67 on November 12, 2009, 09:00:37 AM
Hallo,
ich habe die Slideshow genau nach Deinen Angaben installiert. Leider kann ich keine Einstellungen vornehmen, weil ein entsprechender Button im Controll Center fehlt. Habe ich was falsch gemacht???

MfG
Markus Kaiser
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on November 12, 2009, 09:03:38 AM
Hi Du, alle Einstellungen werden in der CONFIG Datei gemacht. Du müsstest ein Button in den jeweiligen Templates sehen.

Gruß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: need4 on December 01, 2009, 12:36:41 PM
Hallo,

kann mir jemand helfen, bei mir funktioniert das garnicht.
Der Link für die Slideshow ist da, aber nix geht auf.

xxx: wch77. de/4images

Grüße Joachim
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on December 01, 2009, 06:12:48 PM
Hi,
Kontrolliere doch bitte mal die Konfiguration in der Konfigurationsdatei. Kann sein das du da murkst drin hast.

/js/highslide/highslide_cfg_slide.js

Beim Firefox wird in der Fehlerkonsole das angezeigt:
Quote
restoreTitle: 'Klick um das Bild zu schließn, klick und ziehe um zu verschieben. Benutze Pfeiltasten fü und zurü};

so sollte es aussehen
Code: [Select]
restoreTitle: 'Klick um das Bild zu schließen, klick und ziehe um zu verschieben. Benutze Pfeiltasten für vor und zurück.'
};

und das ist nicht das was im Tutorial steht. Kann jetzt auch sein, das die Fehlerkonsole spinnt. Daher bitte einmal genau prüfen.

Gruß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: hongoctrien on December 21, 2009, 05:40:16 AM
EDIT AND REMOVED THE COMPLETE QUOTE FROM POST 1

I did follow the instructions and see that such words silide show where the
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on December 21, 2009, 08:40:26 AM
What kind of error you have?
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: hongoctrien on December 21, 2009, 09:13:56 AM
I did follow the instructions (attachment) But still do not see the button
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on December 21, 2009, 09:21:53 AM
You have to put my codes before

/// CLICKSTREAM, and not


//-----------------------------------------------------
//--- Print Out ---------------------------------------
//-----------------------------------------------------
$site_template->register_vars(array(
  "msg" => $msg,
  "clickstream" => $clickstream
));

$site_template->print_template($site_template->parse_template($main_template));

$content = ob_get_contents();
ob_end_clean();

if ($cache_page_categories) {
  // Reset session mode
  $site_sess->mode = $old_session_mode;

  save_cache_file($cache_id, $content);
}

} // end if get_cache_file()

echo $content;

//Update Category Hits
if ($user_info['user_level'] != ADMIN && $page == 1) {
  $sql = "UPDATE ".CATEGORIES_TABLE."
          SET cat_hits = cat_hits + 1
          WHERE cat_id = $cat_id";
  $site_db->query($sql);
}

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


include(ROOT_PATH.'includes/page_footer.php');


I added the changed php files. Please do a backup from your files, before you upload these ones .....

Title: Re: [MOD]Slideshow mit Highslide JS
Post by: hongoctrien on December 21, 2009, 02:20:35 PM
Thankyou very musch. I can see it
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: donald23 on December 26, 2009, 11:46:46 PM
Hallo
Leider habe ich das selbe Problem wie need 4

Zitat:
need4
Hallo,
kann mir jemand helfen, bei mir funktioniert das garnicht.
Der Link für die Slideshow ist da, aber nix geht auf.
Zitat Ende

Habe alle 6 Datein geändert und nochmals kontrolliert
highslide_cfg_slide.js erstellt und ins Verzeichnis js/highslide/ kopiert alles im txt modus
Links sind da tut sich aber nix hab auch schon ältere 4.1.6 versucht vorher 4.1.8
Dateiatribute alle auf 755 weiss nicht mehr weiter
Falls wer helfen kann Danke
xxx: xxx: ask4free. net

Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on December 27, 2009, 08:28:27 AM
Hi,
nimm mal das aus der highslide_cfg raus
Code: [Select]
hs.Expander.prototype.onAfterExpand = function() {
image_name = this.content.src;
var script = document.createElement('script');
script.setAttribute('src', 'counterupdate.php?image_name=' + image_name); //URL zuweisen
document.getElementsByTagName("body")[0].appendChild(script);
}

Dieser Codeabschnitt gehört in die highslide_full.js. Du hast den Counter nicht richtig eingebunden .....

Gruß
Ingo
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: donald23 on December 27, 2009, 11:02:05 AM
Hallo rinaldos
Ja Danke das ist es aber nicht ist jetzt weg
Browsertechnisch sehe ich es übrigens bei all den anderen Leuten.
Habe mal die 3 phps angehängt
Danke erstmal
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on December 27, 2009, 11:06:18 AM
Bitte prüfe deine highslide_cfg, denn da haste nun anscheinend zu viele Zeichen rausgenommen
Nimm mal die, die vorgegeben ist, sprich meine aus dem ersten POST.


Title: Re: [MOD]Slideshow mit Highslide JS
Post by: donald23 on December 27, 2009, 11:24:43 AM
Ha es funzt Danke du bist spitze
War gestern wohl zu spät für mich.
Danke
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on December 27, 2009, 11:26:13 AM
Kann passieren, das letzte Bild bei dir in Shootings ist noch sehr gross :-)
Das einzige was mich nur bei dir stören würde, das dieses geduldel immer angeht :-( klickt man es aus, gehst in die nächste Kategorie, geht es wieder los :-(

Viel Spass hier noch im Forum :-)

Gruß aus Kölle
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: honda2000 on February 08, 2010, 11:14:42 AM
Hi Ingo,
seh ich es richtig, in der details.html ist ja kein Script, also ist es für den Klick auf ein Einzelbild (Mediadatei) auch nicht gedacht??
So, das man dann aber auch in der Slideshow navigieren könnte.
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on February 08, 2010, 11:24:58 AM
Hi,
die Slideshow ist nur für die Katekorien gedacht, oder dort wo du viele Thumbnails hast (lightbox, search usw.). Für eine Art Slideshow in der details.html ist dieses Ding nie gedacht gewesen. Macht für mich auch keinen Sinn, eine Slideshow für ein einzelnes Bild zu machen :-)
Dafür gibt es doch was anderes

http://www.4homepages.de/forum/index.php?topic=20461.0

Einfach in Dein Media Template von jpg.html einbauen

Gruß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: honda2000 on February 08, 2010, 01:54:38 PM
Perfekte Antwort, Super!
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: rinaldos on February 09, 2010, 11:17:57 AM
Ein neuesTutorial, welches alle andere ersetzen sollte.

http://www.4homepages.de/forum/index.php?topic=26815.0

Gruß
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: hongoctrien on July 19, 2010, 05:44:15 AM
Can you help me.
When I click on the Slideshow button but it does not show that stands still
Just as the picture below
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: x23piracy on October 24, 2010, 01:13:26 PM
Hi,

danke für den MOD allerdings klappt es bei mir nicht.
für die search und categories werden die links nichtmal angezeigt.
Bei der Lightbox ist der Slideshow link zwar sichtbar aber er klickt
man ihn an passiert nichts.

Aus deinem All in One Eintrag funktioniert nur highslide für die
detailseite, ich würde es aber gerne als slideshow nutzen.

Hat jemand eine Idee?


Gruß Jens
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: henary on December 17, 2010, 04:45:49 PM
Hallo,

habe in meiner Testumgebung eine Kategorie mit ~350 Bilder. Sowie ich die categorie.php anklicke, werden die thumbnails geladen, in der Statuszeile sieht man aber, daß noch ewig weiteres geladen wird. Kommentiere ich den Code zur slideshow aus, geht es fix. Ich nehme an, daß zur "Erzeugung des Slideshow-Buttons" so viele Abfragen laufen, daß man das merkt...
Kann das jemand nachvollziehen?

In einer meiner alten 4images nutze ich die Flash-Slideshow, da geht das Laden der categorie.php selbst bei >500 Bildern so fix, daß man den Unterschied nicht merkt, ob der Code aktiv ist oder nicht.

Danke für jeden Lösungsansatz,
Henry
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: x23piracy on December 17, 2010, 05:04:17 PM
Hi,

ein Lösungansatz wird das nicht aber ich kotz mich mal aus...

Danke für jeden Lösungsansatz,

das Problem kenne ich und bei rinaldos (Dem MOD owner) habe ich das auch schon angesprochen.
Ich kann dir sagen was das ist Highslide cached die komplette Kategorie, das es blödsinn ist sollte
klar sein solange ich nicht auf die SlideShow klicke, die wird ja in der Regel eher selten benutzt.

Es würde Sinn machen die Bilder erst zu cachen wenn man die Slideshow auch wirklich startet,
bzw. Highslide max 5 Bilder cached und den Rest nachholt bei Bedarf.

Ich warte dich lieber beim starten der Slideshow 5 Sekunden anstatt den Traffic zu verballern.

Dieses Komplette cachen halte ich für Müll (wir haben DSL, braucht kein Mensch, 56k Zeiten
respektive V.90 sind vorbei), außerdem habe Leute mit einer lahmen Internetverbindung
in einer Bildergalerie nichts verloren bzw. müssen sich einfach gedulden.

Leider hat Rinaldos das bislang nicht lösen können bzw,. steht auf dieses Vorladen.
Ich habe auch noch keine Lösung gefunden.

Es gibt zwar in der highslide config ein value bzgl. der cachemenge aber das zieht nicht.

highslide.js:
Code: [Select]
numberOfImagesToPreload : 5,
Das hat aber keinen Einfluss auf die Menge es bleibt die komplette Kategorie, du kannst dir
vorstellen was passiert wenn die Kategorie noch voller ist als deine, jede Menge Traffic
verschwendung wenn nur schon jemand die Categorie betritt.

Sagen wir jedes deiner 300 Bilder hat 1MB dann lädt der Client wenn das niemand abbricht
Über 300MB für nix wenn die Slideshow nicht benutzt wird.


Gruß Jens
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: henary on December 17, 2010, 05:19:11 PM
Hallo Jens,
Hi,

das Problem kenne ich und bei rinaldos (Dem MOD owner) habe ich das auch schon angesprochen.
Ich kann dir sagen was das ist Highslide cached die komplette Kategorie, das es blödsinn ist sollte
klar sein solange ich nicht auf die SlideShow klicke, die wird ja in der Regel eher selten benutzt.

Es würde Sinn machen die Bilder erst zu cachen wenn man die Slideshow auch wirklich startet,
bzw. Highslide max 5 Bilder cached und den Rest nachholt bei Bedarf.

Dieses Komplette cachen halte ich für Müll (wir haben DSL, braucht kein Mensch, Modem Zeiten
sind vorbei).

Leider hat Rinaldos das bislang nicht lösen können bzw,. steht auf dieses Vorladen.
Ich habe auch noch keine Lösung gefunden.

Es gibt zwar in der highslide config ein value bzgl. der cachemenge aber das zieht nicht.


Gruß Jens

ich war gerade 1,5 Tage auf ISDN  8O sage ich mal zu fast allen Seiten - 4images Forum macht auch mit 64k Spaß  8)

So in der Art dachte ich mir auch die Ursache... wobei ich beim Anzeigen der Bilder zuweilen auch noch ein "lade" angezeigt bekomme, also so richtig "cache" ist das nicht. Sehe ich mir mal den Unterschied zwischen den o.g. slideshows an, im Zweifel müßte man das Cachen durch eine Verlagerung des Codes erzielen können (ich denke so an js, daß der SQL-Befehl erst beim Klick ausgelöst würde...).

Bis später,
Henry
Title: Re: [MOD]Slideshow mit Highslide JS
Post by: x23piracy on December 17, 2010, 05:25:39 PM
Hi,

ich war gerade 1,5 Tage auf ISDN  8O sage ich mal zu fast allen Seiten - 4images Forum macht auch mit 64k Spaß  8)

Der Slideshow muss beizubringen sein die Bilder eben nicht zu cachen oder nur einen Teil, das ist definitv ein
Bilder vorladen, wie soll Highslide sonst sofort alle Bilder darstellen können und einen ganz schnellen wechsel
der Bilder erlauben.

Ich könnte ja eigentlich mal mit Firebug genauer hinsehen, schon geschehen bei dir?

off Topic:

ist ja nur Text ;) kannst ja Kanalbündelung machen und dich damit unerreichbar ;) richte dir über den
D-Kanal noch ne Leitung zur telefonischen Außenwelt ein, falls mal einer anruft hehe.