4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Releases & Support) => Topic started 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
{if highslide}
{highslide_link}
{highslide_js}
{slideshow_highslide}
{endif highslide}
lightbox.html (am besten in den Abschnitt {if thumbnails} / {endif thumbnails})
{highslide_link}
{highslide_js}
{slideshow_highslide}
categories.html (am besten vor den Abschnitt {if categories} / {endif categories})
{highslide_link}
{highslide_js}
{slideshow_highslide}
füge in folgenden Dateien, jeweils vor
//-----------------------------------------------------
//--- 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
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.
-
... die erste Slideshow für 4images mit Image-Counter, war immer ein Manko aller anderen Slideshows ...
... mit den Vorschaubildern sieht die Slideshow Klasse aus ...
-
Super Arbeit! Habe es gleich in meiner Liste aufgenommen!
http://www.4homepages.de/forum/index.php?topic=24888.msg136127#msg136127
-
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
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 :-)
-
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:
Nun im 4images ROOT Verzeichnis die Datei counterudate.php erstellen
Hat der Bildcounter nicht gefunzt. counterudate.php -> counterupdate.php
-
:-) 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ß
-
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
-
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
-
Benutzte MOD Version: V 2 (mit Konfigurationsdatei)
Link:
Andere IE Versionen konnte ich noch nicht testen.
-
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?
-
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.
-
wie sieht es denn mit meiner geposteten Konfig aus? klappt die denn?
Du hast hier diesen Wert drinne:
wrapperClassName: 'borderless floating-caption',
vielleicht sollte da am Ende ein Semikolon stehen.
-
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:
$highslide_js .= "\n<link rel=\"stylesheet\" type=\"text/css\" href=\"".ROOT_PATH."js/highslide/highslide.css\" />\n";in
$highslide_js .= "\n<link rel=\"stylesheet\" type=\"text/css\" href=\"".ROOT_PATH."js/highslide/highslide-ie6.css\" />\n";Hat aber auch nix gebracht.
-
Gib mir doch bitte mal per PM einen ftp Zugang .....
Gruß
P.S. Die anderen Dateien sind auch nicht zwingend erforderlich
-
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
-
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.
-
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
-
Hi,
in Global.php you can turn off those messages.....
simply uncomment this
error_reporting(E_ERROR | E_WARNING | E_PARSE);
to
// error_reporting(E_ERROR | E_WARNING | E_PARSE);
Thanks for your reply :-)
-
Morgen!
...
@vano hat heute in der search.php das eingefügt '$highslide_js = "";' damit sollte die fehlermeldung nicht mehr kommen.
mfg Andi
-
IE6 Problem gelöst, war mein Fehler :oops:
Die Datei "highslide_cfg_slide.js" war nicht in UTF - 8 von mir gespeichert wurden.
-
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... :(
-
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
$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
$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
$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
$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
title=\"".$image_row['image_name']."\"
gegen
title=\"".$image_row['image_description']."\"
ausgetauscht
Gruß
Ingo
-
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?
-
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
title=\"Name: ".$image_row['image_name']." <br>Beschreibung: ".$image_row['image_description']."\"
Gruß
-
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
title=\"Name: ".$image_row['image_name']." <br>Beschreibung: ".$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.
-
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....
-
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
-
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ß
-
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! :)
-
????
-
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
-
Hi,
wenn ich das richtig verstehe, willst du von der Detailseite die Diashow der Kategorie aufrufen?
LG
ingo
-
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
-
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ß
-
hi there and thank you very much for all info ..
is ther ea wayto have the onfly watermark on slideshow images too ?
thnx
-
Welcome,
no there is no way. It's only a slideshow.
Gruß
-
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
.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ß
-
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:
.highslide-dimming {
background: black;
}
in der Konfigurationsdatei deiner Slideshow fügst du das hinzu:
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
-
besten dank,
der fehler lag
.highslide-dimming {
position: absolute;
background: black;
}
habe position: absolute; gelöscht und schon funzt es
danke
-
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
-
Hi Du, alle Einstellungen werden in der CONFIG Datei gemacht. Du müsstest ein Button in den jeweiligen Templates sehen.
Gruß
-
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
-
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:
restoreTitle: 'Klick um das Bild zu schließn, klick und ziehe um zu verschieben. Benutze Pfeiltasten fü und zurü};
so sollte es aussehen
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ß
-
EDIT AND REMOVED THE COMPLETE QUOTE FROM POST 1
I did follow the instructions and see that such words silide show where the
-
What kind of error you have?
-
I did follow the instructions (attachment) But still do not see the button
-
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 .....
-
Thankyou very musch. I can see it
-
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
-
Hi,
nimm mal das aus der highslide_cfg raus
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
-
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
-
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.
-
Ha es funzt Danke du bist spitze
War gestern wohl zu spät für mich.
Danke
-
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
-
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.
-
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ß
-
Perfekte Antwort, Super!
-
Ein neuesTutorial, welches alle andere ersetzen sollte.
http://www.4homepages.de/forum/index.php?topic=26815.0
Gruß
-
Can you help me.
When I click on the Slideshow button but it does not show that stands still
Just as the picture below
-
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
-
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
-
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:
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
-
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
-
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.