Hier im Forum existieren zwei MOD bzgl Highslide. Einmal die Slideshow, zum anderen das herauspoppen von Bilder aus der thumbnail_bit. In diesem Tutorial wird erklärt, wie Du einfach beides miteinander kombinierst bzw. erweiterst.
(
Schritt 1 - für Schritt 2,3 oder 4 erforderlich!)
Installation von highslide
(
Schritt 2 - empfohlen)
Demo zum heraussliden der Bilder in der details.php
http://rinaldos.homeip.net/details.php?image_id=12582Standard 4images
http://4images_1.rinaldos.homeip.net/details.php?image_id=1(
Schritt 3 - empfohlen)
Demo zur Slideshowfunktion
http://rinaldos.homeip.net/categories.php?cat_id=364 Standard 4images
http://4images_1.rinaldos.homeip.net/categories.php?cat_id=1(
Schritt 4 nur wenn kein Schritt 3 genommen wurde)
Der einzige Schönheitsfehler der beim heraussliden der THUMBNAILS entsteht: Es werden die Konfigurationseinstellungen aus Schritt 3 übernommen. Daher empfehle ich, Schritt 4 nicht zu verwenden! In den ganzen Übersichtsseiten wird die Slideshow dargestellt, daher kann jeder für sich entscheiden, entweder, oder!Demo zum heraussliden von einzelnen thumbnails:
http://rinaldos.homeip.net/categories.php?cat_id=386 Standard 4images
http://4images_1.rinaldos.homeip.net/categories.php?cat_id=1----------------------Schritt 1: Installation von HIGHSLIDE
- Download der Dateien von
http://highslide.com/download.php Ziemlich in der Mitte findest du die Versionsnummer und den passenden Download Button.
Nach einem bestätigen der Lizenzinformation wird die Datei geladen.
- Enpacke die ZIP Datei und kopiere nur das Verzeichnis "highslide" in das Verzeichnis "js" auf deinem Server. Sollte in deinem 4images Hauptverzeichnis, das Verzeichnis "js" nicht existieren, musst du es anlegen.
In der Standardversion von 4images, ist dieses Verzeichnis nicht existent!Anschliessend muss es so aussehen
4images ROOT Verzeichnis
/js
/js/highslide
/js/highslide/graphics
Schritt 1.1: editiere nun die Datei /js/highslide/highslide_full.js
füge ganz am Ende folgenden Code ein. Dieser Code ist dafür da, damit deine Hits auch weiterhin aktualisiert werden.
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);
}
Schritt 1.2: erstelle nun die Datei counterupdate.php im Hauptverzeichnis deines Servers mit folgendem Code
<?php
define('GET_CACHES', 1);
define('ROOT_PATH', './');
include(ROOT_PATH.'global.php');
require(ROOT_PATH.'includes/sessions.php');
include(ROOT_PATH.'includes/page_header.php');
$image_thumb_file = $HTTP_GET_VARS['image_name'];
$cat_id = preg_replace("/http(.*?)\/data\/media\/([0-9]+)\/(\w+).(\w+)/esi", "('\\2')", $image_thumb_file);
if(is_numeric($cat_id)) {
$image_thumb_file = preg_replace("/http(.*?)\/data\/media\/(\w+)\//si", "", $image_thumb_file);
}else {
$image_thumb_file = $HTTP_GET_VARS['image_name'];
$cat_id = preg_replace("/http(.*?)\/data\/media\/([0-9]+)\/big\/(\w+).(\w+)/esi", "('\\2')", $image_thumb_file);
$image_thumb_file = preg_replace("/http(.*?)\/data\/media\/(\w+)\//si", "", $image_thumb_file);
$image_thumb_file = preg_replace("/big\//si", "", $image_thumb_file);
}
// NUR AKTIVIEREN WENN der MOD TOP100 aktiviert ist
// http://www.4homepages.de/forum/index.php?topic=23055.0
/*$image_last_view_who = $user_info['user_id'];
$user_name_who = $user_info['user_name'];
if ($user_name_who == "") {
$user_name_who = $lang['userlevel_guest'];
}
else {
$user_name_who = $user_info['user_name'];
}
$sql = "UPDATE ".IMAGES_TABLE."
SET image_last_view = '".time()."', image_last_view_who = '$user_name_who', image_hits = image_hits + 1
WHERE image_thumb_file = '$image_thumb_file' AND cat_id = '$cat_id'";*/
// WENN TOP100 MOD aktiv ist, dann die SQL Abfrage rausnehmen
$sql = "UPDATE ".IMAGES_TABLE."
SET image_hits = image_hits + 1
WHERE image_thumb_file = '$image_thumb_file' AND cat_id = '$cat_id'";
$site_db->query($sql);
?>
Schritt 1.3:editiere die Datei header.html in deinem Template Verzeichnis
und für vor
{if has_rss}
folgenden Code ein
{ifnot slideshow_highslide}
<script type="text/javascript" src="js/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="js/highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'js/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
// define the restraining box
hs.useBox = false;
hs.width = 1024;
hs.height = 768;
</script>
{endifnot slideshow_highslide}
Sollte es wiedererwarten nicht klappen, probiert es mal ohne IF / ENDIF. (Einfach die Zeilen IF und ENDIF entfernen)
Dieser Schritt ist notwendig, damit Ihr die Möglichkeiten habt, auch im BLOG oder anderen Templates die Highslidefunktion zu nutzen.
----------------------Schritt 2:highsliden auf der Detailsseite
öffne nun die Datei jpg.html in deinem TEMPLATE VERZEICHNIS/media
ersetze den kompletten Inhalt mit folgendem Code
<!-- Template file for JPG Files -->
<!--<img src="{media_src}" border="1" alt="{image_name}"{limit_var}="{new_limit}" /><br /> -->
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td align="center" valign="middle">
<a href="{media_src}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="{media_src}" alt="Highslide JS" {limit_var}="{new_limit}" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
----------------------Schritt 3:Slideshow integrieren
füge in allen Templates, wo du eine Slideshow haben willst, folgenden Code ein:
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}
Schritt 3.1:füge in folgenden Dateien, jeweils vor (above)
//-----------------------------------------------------
//--- Clickstream -------------------------------------
//-----------------------------------------------------
folgenden Code ein:
Schritt 3.2: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_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
Schritt 3.3:search.php
// [MOD] Slideshow with HIGHSLIDE START
if ($num_rows_all && $show_result == 1) {
$sql1 = "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']."";
$result1 = $site_db->query($sql1);
$num_rows = $site_db->get_numrows($result1);
$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($result1)){
$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";
// $highlslide_js .= "";
$highslide_js .= "</script>\n";
}
$site_template->register_vars(array(
"highslide_link" => $highslide_link,
"highslide_js" => $highslide_js,
"slideshow_highslide" => $slideshow_highslide
));
}
// [MOD] Slideshow with HIGHSLIDE END
Schritt 3.4:lightbox.php
// [MOD] Slideshow with HIGHSLIDE START
$sql1 = "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']."";
$result1 = $site_db->query($sql1);
$num_rows = $site_db->get_numrows($result1);
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($result1)){
$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
Schritt 3.5: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 = 0.75;
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 Slideshow mit dem Editor von Highslide JS nach belieben konfigurieren und anpassen.
Dazu gehe hierhin
http://highslide.com/editor/ und ersetzte ggf
einzelne Codezeilen deiner Konfigurationsdatei mit
einzelnen Codezeilen "View Javascript" -> Javascript. Ersetze
NIE die komplette Konfigurationsdatei.
Solltest du doch die komplette Konfiguration ersetzt haben, funktioniert DEINE Slideshow nicht mehr.Möchtest du in der Slideshow den Hintergrund schwarz abgedimmt haben, musst du in der Datei, /js/highslide/highslide.css folgendes abändern:finde
.highslide-dimming {
position: absolute;
background: black;
}
und ersetze mit
.highslide-dimming {
background: #000000;
}
In der DEMO ist dieses bereits geschehen!
----------------------Schritt 4:Kopiere TEMPLATE VERZEICHNIS/thumbnail_bit.html nach TEMPLATE VERZEICHNIS/thumbnail_index_bit.html.
Schritt 4.1:Finde
$new_images .= $site_template->parse_template("thumbnail_bit");ersetze mit
// original $new_images .= $site_template->parse_template("thumbnail_bit");
$new_images .= $site_template->parse_template("thumbnail_index_bit");
Deine index.php benutzt nun das Template thumbnail_index_bit.html für neue Bilder
Schritt 4.2:Editiere TEMPLATE VERZEICHNIS/thumbnail_bit.html
Ersetze alles mit folgendem Code
<!-- you wish detail page in a small javascript open window, use {thumbnail_openwindow} -->
<br />
<b>{image_name}</b> {if image_is_new}<sup class="new">{lang_new}</sup>{endif image_is_new} ({user_name_link})
<br />
{if user_loggedin}<a href="{media_src}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt="Highslide JS"
title="Click to enlarge" height="60" /></a>{endif user_loggedin}
{if user_loggedout}
{thumbnail}
{endif user_loggedout}
<br/>
<a href="{image_url}">Details</a>
<br/>
{if allow_comments}{lang_comments} {image_comments}{endif allow_comments}<br />
{lightbox_button}
Nun hast du auch die highslide Funktion in den Übersichtsseiten (Kategorien, Suche, Lightbox).
Hoffe das ich nun nichts vergessen habe!
Gruß
Ingo