[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 JShttp://highslide.com/#licenceDemo:
Über die Suche
http://rinaldos.homeip.net/search.htm?search_keywords=Norwegen&submit=SuchenÜber eine Kategorie
http://rinaldos.homeip.net/cat228.htmhttp://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#msg139761Ich 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.