4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Releases & Support) => Topic started by: rinaldos on February 09, 2010, 11:16:16 AM
-
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=12582
Standard 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
-
Super Tut!
Perfekt gemacht!
Dennoch, es geht die Slideshow als Slideshow nur für angemeldete User!
Kann man das umgehen und für alle User machen??
SPRICH:
Der Teil:
categories.html und thumbnail_index_bit.html/thumbnail_bit.html
-
Ja, in der thumnail bit, einfach die TAGS {if user_loggedin}{endif user_loggedin}{if user_loggedout}{thumbnail} {endif user_loggedout} rausnehmen, dann hat jeder User etwas davon :-)
Äh Sorry, slideshow?
-
<center>
<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" width="150" /></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}
</center>
{if user_loggedin}
{endif user_loggedin}
{if user_loggedout}
{thumbnail}
{endif user_loggedout}
kommt der PHP-Fehler:
Parse error: syntax error, unexpected $end in /www/htdocs/w00a9ed4/ernst/includes/template.php(101) : eval()'d code on line 39
...und es werden keine Thumbs angezeigt, das hatte ich leider gestern schon!
Entferne ich:
-
... bei dieser Fehlermeldung ist zumeist ein {if ....} Tag nicht korrekt mit einem {endif ...} Tag geschlossen worden ...
... forste dazu das gesamte Template durch, stelle fest welcher Tag noch offen ist und schließe ihn dann ...
-
Das hab ich ja auch gedacht, aber mehr als der neue (komplett bis auf die Erweiterung: <center></center>) Code von Ingo, kam ja nicht dazu.
8O 8O 8O
Eingeloggt gehts ja auch pefekt, nur eben ausgeloggt nicht!
Ich hab ja:
{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" width="150" /></a>
{endif user_loggedin}
{if user_loggedout}
{thumbnail}
{endif user_loggedout}
tatsächlich entfernt.
-
EDIT2:// Problem gelöst hab das </script> übersehen und somit das ganze in das "große" script der Detials.html eingebaut
Moin,
ich hab vor nen paar Tagen die Slideshow eingebaut
http://www.4homepages.de/forum/index.php?topic=25531.0
da diese auch von dir ist denke ich mal das die beiden gleich sind oder?
Jetzt wollte ich noch das mit der Detail seite einrichten.
Die Anleitung hab ich befolgt nur jetzt is das Problem das sobald ich auf das Bild klicke, das Bild im Fenster neu geladen wird und alleine steht.
Wenn jemand lust hat kann er es sich anschauen:
xxx: foto.emergency-light.de/4images/
Bitte keinen mist machen weil es schon von einigen beutzt wird.
Was mich wundert ist das wenn ich mir mit firebug die seite anschaue bekomme ich auf der detail seite die fehlermeldung:
unexpected end of XML source
<script type="text/javascript" src="js/highslide/highslide-full.js">
und darunter diesen:
hs is not defined
hs.graphicsDir = 'js/highslide/graphics/';
das komische is das die css datei geladen wird.
jemand ne idee was der Fehler sein könnte?
Grüße
Hamster
EDIT:// wenn ich 1:1 die gleiche Zeile drunter kopiere funktioniert das ganze.
{ifnot slideshow_highslide}
<script type="text/javascript" src="js/highslide/highslide-full.js"></script>
<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}
ich muss sagen ich versteh die welt net mehr
-
@Hamsterlein, geht es nun?
@Honda, kommt denn eine Fehlermeldung, oder bist du im falschen Template? Denn wenn es eingeloggt geht, muss es ja auch ausgeloggt gehen.
Gruß
-
Das ist ja das Problem, eingeloggt geht es, ausgeloggt werden die Bilder (Klick Thumb) auf einer neuen Seite geladen.
Ich verwende nichts anderes, als deinen Code, mit
{xxx}{xxx}
mit gehts, ohne gehts nicht!
-
Kannst du mir mal einen Link geben, wo es nicht funktioniert?
GGF musst du den Pfad in der Header komplett angeben, wo das Script liegt .....
Gruss
-
sollte das nicht so heissen:
<script type="text/javascript" src="./js/highslide/highslide-full.js"></script>
-
ja mein problem geht jetzt wieder.
@Rembrandt
müsste das nicht egal sein, weil mit dem ./ sagst du ja nur von hier an und da die details.php sowie der js ordner im root verzeichnes von 4images liegt.
-
Nu gloar gansde guggen.
www.ernst-kollrus.de
-
Nu gloar gansde guggen.
so kann man auch eine galerie zerlegen, detailseite wird nicht mehr aufgerufen, das bild öffnet sich auf einer leeren html seite.
-
Wie is das den gedacht? soll das Bild wenn man drauf klickt direkt mit dem Highslide vergrößert werden? weil dan stimmt die verlinkung auf dem Bild nicht.
Deine sieht momentan so aus:
<a title="Big Boss" rel="lightbox" target="_blank" href="./data/media/3/IMG_1456.JPG">
Thumb link
</a>
ich würde mir dan eher sowas vorstellen:
<a title="Big Boss" onclick="return hs.expand(this, {captionId: 'caption1'})" class="highslide" rel="lightbox" href="./data/media/3/IMG_1456.JPG">
Thumb link
</a>
-
@Honda,
bei dir besteht nur ein Problem zum Java Script. Da passt irgendwas nicht :-( Ich habe die scripte in einer standard 4images Installation getestet, und da klappen die. Liegt das js auch im 4images Root?
Gruss
-
Ja, liegts, sonst würde es ja eingeloggt nicht funtionieren.
Eingeloggt funktioniert bis auf das random-Image alles. Das Zufallsbild öffnet auf einer neuen HTML-Seite, so wie ausgeloggt alles, sonst geht eingeloggt alles.
Die Seite ist auch nur frisch und neu!
-
Hallo !
Ein Freund von mir, hat auf meiner Homepage xxx: ernst-kollrus. de den Mod
[MOD] Highslide ALL IN ONE (Slideshow/heraussliden details und thumbnails)
eingebaut.
Leider ist die Funktion nur als Registrierter User auf meiner Homepage aktiv.
Als nicht registrierter User fehlt jede Funktion der Slideshow.
Ich hoffe mir kann hier jemand das Problem erklären, wie da abhilfe zu schaffen ist.
LG Ernst
-
Wofür denn diese Umfrage?
Solltest du Probleme mit dem MOD haben, dann bitte im MOD Thread .....
Gruß
-
Sorry, kannst du mir meinen Beitrag verschieben ?
LG Ernst
-
Das erklärt aber immer noch nicht die Umfrage?
Biite kläre mich via PM auf........
@erko,
wenn ich mir deine header anschaue, dann ist da nicht der Schritt 1.3 richtig eingebaut. Schick mir mal nen FTP via PM ....... Das muss ich mir im Original anschauen
-
Bestimmt ein Anfängerfehler....
Wollte das Mod Step-by-Step umsetzen - Ergebnis: xxx: dschnaigas. cjs. de
Irgendwie hatte ich mir das anderst vorgestellt :oops:
Bin die Punkte 1-4 nochmals akribisch durchgegangen - ich kann keinen Fehler finden :(
Kann mir bitte, bitte jemand unter die Arme (hab Deo genommen) greifen?
VG
Claus
-
Hi,
nimm doch mal bitte aus deiner Webseitenbeschreibung die Apostroph raus :-)
alert('© Copyright by Fotogallerie D'Schnaigas - Der Treffpunkt');return false
Die bringen ein wenig die Scripte durcheinander. Und wenn du es gemacht hast, schauen wir mal weiter :-)
-
Ähmmmm,
schon fangen meine Probleme an - das Statement '© Copyright by Fotogallerie D'Schnaigas - Der Treffpunkt' finde ich nirgends!
Warst du auf meiner Seite h t t p : / / d s c h n a i g a s . c j s . d e ??
Ich habe nirgendwo ein Copyright angegeben!
Oder warst du auf w w w . d s c h n a i g a s . d e ? Von dort aus soll nur über [Gallerie] auf die erste Adresse verlinkt werden.
Aber Dankeschön schonmal für die erste Antwort - da fühlt man sich doch gleich umkümmert :)
VG
Claus
-
Hi und guten Morgen,
ja da war ich :-) Du stellst deinen HP Namen im ACP ein. Und Sicherlich hast du unter ACP -> Einstellungen -> Name der Galerie, einen Namen vergeben mit einem Apostroph, oder so?
Gruß
NACHTRAG
PROBLEM gelöst, hier fehlte einfach nur der SCHRITT 1, die reine Installation im richtigen Verzeichnis .... (Musste weiterhin die IF / ENDIF in der header.html entfernen, weiss zwar nicht wieso, aber danach klappte dann auch der highsliude vom THUMBNAIL)
Schaue doch mal bitte ob du wirklich den MOD auch in allen Dateien richtig eingeflegt hast. Nicht das du dich im FALSCHEN 4images Verzeichnis bewegt hast.....
NACHTRAG 2 vom 16.03.2010
Problem 2 gelöst
Bitte geht nach der ANleitung vor, sollte ich nochmal jemanden hier schreiben sehen, iuch habe alles nach der Anleitung gemacht und es ist dann nur ein Bruchteil gemacht worden, dann werde ich nicht mehr helfen.
-
I would like to insert the highslide script to my 4images site so it will open images like this site http://rinaldos.homeip.net/categories.php?cat_id=386 (http://rinaldos.homeip.net/categories.php?cat_id=386)
I tried steps 1,2,4 but it didn't work perhaps it's because I don't speak german.
I'm trying to edit the default_full template.
can you write what I have to do in English ?
-
can someone explain how to integrate flash(.swf) with highslide?
-
I would like to insert the highslide script to my 4images site so it will open images like this site http://rinaldos.homeip.net/categories.php?cat_id=386 (http://rinaldos.homeip.net/categories.php?cat_id=386)
FAQ -> Search -> http://www.4homepages.de/forum/index.php?topic=20461.0
-
1) I managed to integrate the highslide to my site, but i would like that the thumbnail will open with highslide and not redirect me to the detailed page.
see my site here (http://sachlavim.byethost4.com/4images_alt/).
2) I would like to open the flash too can some one guide me how?
-
I tried posting at the highslide mod but no answer!
can somebody help me opening the flash (.swf) file with highslide mod?
you can see that i managed the jpg files.
-
can somebody help me opening the flash (.swf) file with highslide mod?
no, this does not work
-
it's possible, I think that you need to check at the swf.html if it is a jpg or swf if it's a swf open it like this http://www.roadrash.no/hs-support/flash-gallery.html (http://www.roadrash.no/hs-support/flash-gallery.html)
I'm trying to solve it, and i will update
O.k. I partially managed it you can see it Here (http://sachlavim.byethost4.com/4images_alt/details.php?image_id=3)
some problems:
1) the thumbnail image changes each time i press F5 (refresh) the Image source img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}"
2) the height is too large
3) I would like a larger margin from the top
4) I would like that it will work on the categories page as well.
now I need your help
swf.html
<!-- Template file for Flash Movies -->
<table cellpadding="1" cellspacing="0" border="0">
<tr>
<td bgcolor="#000000">
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="./js/highslide/highslide-full.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="./js/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="./sj/highslide/highslide-ie6.css" />
<![endif]-->
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'js/highslide/graphics/';
hs.wrapperClassName = 'flash';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.a.title';
hs.marginBottom = 1; // make room for the thumbstrip and the controls
hs.allowSizeReduction = false;
hs.preserveContent = false;
</script>
<style type="text/css">
/* Remove the header */
.flash .highslide-header {
display: none;
}
/* Remove the footer */
.flash .highslide-footer {
display: none;
}
/* Remove padding in the popup */
.flash .highslide-html-content {
padding: 0;
}
/* Remove Play, Pause and Full expand buttons from the controls */
.text-controls .highslide-controls .highslide-play {display: none;}
.text-controls .highslide-controls .highslide-pause {display: none;}
.text-controls .highslide-controls .highslide-full-expand {display: none;}
</style>
</head>
<body>
<!--
3) Put the thumbnails inside a div for styling
-->
<div class="highslide-gallery">
<!--
4) This is how you mark up the thumbnail images with an anchor tag around it.
The anchor's href attribute defines the URL of the swf file. Given the captionEval
option is set to 'this.a.title', the caption is grabbed from the title attribute of
the anchor.
-->
<a class='highslide' id="thumb1" href='{media_src}'
onclick="return hs.htmlExpand(this, { objectType: 'swf', width: 700,
objectWidth: 700,objectHeight: 500, maincontentText: 'You need to upgrade your Flash player'} )">
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt='highslide' /></a>
</div>
<!-- <object width="800" height="600" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"{width_height} />
<param name="movie" value="{media_src}">
<param name="quality" value="high">
<param name="play" value="true">
<param name="scale" value="true">
<embed width="800" src="{media_src}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"{width_height}></embed></object></td>
-->
</tr>
</table>
-
O.k. It looks like I'm corresponding with myself !!!
Is there anybody on this forum that can help me here, solving the issues mentioned above?
-
Hi,
ich habe Probleme mit Schritt 3, Highslide für Thumbnails klappt testweise.
Schritt 3 habe ich nur für categories (php) eingebunden.
Die Tags:
{highslide_link}
{highslide_js}
{slideshow_highslide}
stehen in meiner categories (html), wenn ich meine Seite nun aufrufe taucht
leider nirgendwo der erwartete Link "slideshow" auf.
Da Schritt 2 funktioniert denke ich das Highslide (Schritt 1) prinzipiell funktioniert.
Hat jemand eine Idee woran es liegen könnte meine 4Images ist 1.7.8
Gruß Jens
-
@Rinaldos
erstmals klasse teil !!!
könntest du mir bitte bei nem problem helfen
ich möchte die slideshow nicht in den kategorien oder suchen, sondern so wie du unter dem bild
zb
http://rinaldos.homeip.net/img8452.htm
da werdem bei dir 5 bilder angezeigt.
wie funktioniert das ?
Danke für deine hilfe
-
Hi,
die 5 Bilder unter dem einen Bild sind aus diesem MOD.
http://www.4homepages.de/forum/index.php?topic=7294.msg124362#msg124362
Gruß
Ingo
-
Hi,
@rinaldos
nochmal danke für deine Hilfe ;)
Ich versuche vergeblich den preload für die Slideshow abzustellen.
Ist Highslide für die categories aktiv wird immer die komplette
Kategorie vorgeladen, was ich für überflüssig halte, da die Slideshow
eher selten zum Einsatz kommt.
Jemand der eine Slideshow sehen möchte kann denke ich kur warten
bis die Bilder geladen wurden.
Mir würde es schon reichen wenn sich Highslide an das setting der highslide-full.js
halten würde aber das hat scheinbar keinen Einfluss auf deinen MOD.
numberOfImagesToPreload : 5,
Völlig unabhängig davon was ich dort einstelle wird trotzdem die ganze Kategorie geladen.
Wie schalte ich das aus?
Gruß Jens
-
Hi,
der default Wert liegt immer bie 5 :-) Laut dem Entwickler:
http://highslide.com/ref/hs.numberOfImagesToPreload
Gruß
-
Hi,
der default Wert liegt immer bie 5 :-) Laut dem Entwickler:
http://highslide.com/ref/hs.numberOfImagesToPreload
Gruß
Hi,
ich seh doch an den objekten die geladen werden das es sich um die gesamte Kategorie handelt,
dafür spricht auch die Ladezeit auch im Vergleich mit Kategorien mit mehr oder weniger Bildern.
Gruß Jens
-
Hallo,
bin erstaunt, dass es mir als Anfänger gelungen ist, die drei schritte scheinbar fehlerfrei zu installieren.
Slideshow klappt und heraussliden der Bilder in der details.php funktioniert auch.
Ich habe nur das Problem, das meine Bilder auf der Detailseite genauso groß sind wie die Bilder, die herausgezoomt werden (bzw. in der Slideshow erscheinen)
Ich bräuchte ja drei Bildergrößen.
Kann ich das über Einstellungen in dem Control Panell erreichen?
-
... drei Bildergrößen => [TUT] One Image - Three Sizes (http://www.4homepages.de/forum/index.php?topic=20496.0) ... ;)
-
Hallo Rinaldos,
erst mal vielen Dank für diese tolle Modifikation. Wenn man Deine Beispielseite sieht, ist es schon beeindruckend.
Leider klappt es bei mir noch nicht so richtig. Habe nun schon alles mögliche versucht, um selbst auf den Fehler zu kommen, aber leider ohne Erfolg.
Und nun hab ich mein Pulver auch verschossen. Ich weiß nicht, was ich noch machen kann. Die Bilder werden von Highslide nur in der Größe wie auf der Detailseite dargestellt.
Ich habe aber einen Verdacht, warum keine großen Bilder von Highslide angezeigt werden:
Im 2.Schritt habe ich u.a. diese Zeilen wie vorgesehen in die Datei jpg.html in meinem TEMPLATE VERZEICHNIS/media eingetragen:
<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>
Wenn ich mir im Browser die Quelle anzeigen lasse, erscheint:
<a href="./data/media/1/grne_Phase_3D.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="./data/media/1/grne_Phase_3D.jpg" alt="Highslide JS" ="" /></a>
ich glaube es müsste heißen: ./data/media/1/big/grne_Phase_3D.jpg
Im Ordner big ist jedenfalls das Originalbild abgespeichert.
Testweise habe ich folgende zwei Zeilen in die jpg.html eingefügt.:
<a href="./data/media/1/big/grne_Phase_3D.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="./data/media/1/grne_Phase_3D.jpg" alt="Highslide JS" ="" /></a>
Und siehe da, es funktioniert. Natürlich nur bei dem einen Bild.
{media_src} müsste in der ersten Zeile so geändert werden, dass big im Pfad enthalten ist.
Lösung gefunden:
<a href="./data/media/{cat_id}/big/{image_file_name}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="{media_src}" alt="Highslide JS" ="" /></a>
Bei gleichen Dateinamen funktioniert es einwandfrei.
Aber die Dateien im big-Ordner haben die Dateinamen, wie sie beim Upload angegeben wurden, darunter sind evtl. auch Großbuchstaben .
Die verkleinerten Bilder haben nur Kleinbuchstaben im Dateinamen. Das müsste angeglichen werden, sonst klappt es nicht.
Ich weiß noch nicht wie man das machen soll.
Beste Grüße
Artemios
-
Hi,
der Highslide part in der lightbox.php sorgt in 1.7.9 für folgenden Fehler beim
löschen der Lightbox oder beim betreten der leeren Lightbox:
http://www.4homepages.de/forum/index.php?topic=28295.0 (http://www.4homepages.de/forum/index.php?topic=28295.0)
Was muss da geändert werden?
Gruß Jens
-
...Aber die Dateien im big-Ordner haben die Dateinamen, wie sie beim Upload angegeben wurden, darunter sind evtl. auch Großbuchstaben .
Die verkleinerten Bilder haben nur Kleinbuchstaben im Dateinamen. Das müsste angeglichen werden, sonst klappt es nicht.
..
daran wird gearbeitet, du mußt dich noch ein wenig gedulden.
mfg Andi
-
Mit der folgenden erweiterung kann mann in der Details ansicht ein LINK zum orginallbild im BIG ordner setzen.
in details.html
<a href="data/media/{cat_id}/big/{image_file_name}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">Orginallbild</a>
an gewünschter stelle einfügen.
gruß
-
Hallo
Was muss ich machen damit der Link zum Orginalbild im BIG ordner in der Detailsansicht, nur angezeigt wird wenn tatsächlich ein Bild im BIG ordner vorhanden ist.
<a href="data/media/{cat_id}/big/{image_file_name}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">Orginallbild</a>
gruß
-
I love this Mod, thankyou , very very much. Easy to follow instructions ( although I don't speak german - babel fish helped me ), excellent method.
-
toller mod!
ich habe aber das problem, dass der IE 9 das heraus-sliden nicht macht, so wie es sein soll. es wird nur das bild auf einer neuen seite angezeigt.
weiss jemand das problem zu lösen?
gruss Loda
-
hallo,
ein kleines problem:
auf meiner seite kann man auch pdf hochladen.
da ich das heraussliden aus dem thumbnails benutze, funktioniert die vorschau natürlich nicht bei den pdf's
was muss ich machen, damit bei den pdf das sliden verhindert wird?
eventuell mit {if_is pdf}{thumbnail}{endif_is pdf} ??
-
Hallo rinaldo,
gestern habe ich mich hingesetzt und versucht das nach Deiner Anleitung zu installieren. Leider habe ich das nicht hinbekommen. Es funtioniert nur das heraussliden der Bilder in der Einzelansicht. Das heraussliden der Thumbs und der Lightbox usw. geht nicht und die Cursortasten für das nächste Bild auch nicht. Es kommen aber immerhin auch keine Fehlermeldungen. Hier die Gallerie im aktuellen Zustand: fliegerhorst.dyndns.org/4Images
Ich bin genau nach der Anleitung vorgegangen. Als Ausgangsbasis hatte ich die bereits mit Bildern gefüllte 4Homepage v1.7.11 ohne MODs oder irgendwelchen Änderungen.
Vieleicht habe ich beim bearbeiten der Dateien Fehler gemacht: Daher hier ein paar Fragen
- Einige zu editirende Dateien sind in dem template-Ordner in Unterordnern mehrfach vorhanden. Der Template Ordner enthält 3 Unterordner. Welche Dateien in den Unterordnern müssen genau geändert werden?
- An welcher genauen Stelle in der Datei search.html muß man in allen Templates, wo ich meine Slideshow haben will, den Code einfügen?
- Code einfügen in lightbox.html (am besten in den Abschnitt {if thumbnails} / {endif thumbnails}) --> Den Abschnitt gibt es in den lightbox.html-Dateien leider zwei Mal. Wo muß ich den Code einfügen? Beide Male, einmal ?
- Schritt 4 habe ich nicht durchgeführt.
Vieleicht muß ich das ja einfach nochmal machen....
Vielen Dank
SCT