4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Releases & Support) => Topic started by: rinaldos on February 08, 2008, 02:18:31 PM
-
Codeupdate 06.06.2009
- changed ULR to highslide.com
- fixed STEP 4 (path)
- removed STEP 6
- removed STEP 7
This is an addon to zoom into an Image from the thumbnails with Highslide JS
Demo:
http://rinaldos.homeip.net/categories.php?cat_id=386
Step1:
Create a file called thumbnail_index_bit.html. Easy for you, copy your /templates/default/thumbnail_bit.html to /templates/default/thumbnail_index_bit.html.
Step2:
replace in /index.php following line:
find
$new_images .= $site_template->parse_template("thumbnail_bit");
replace with:
// original $new_images .= $site_template->parse_template("thumbnail_bit");
$new_images .= $site_template->parse_template("thumbnail_index_bit");
Your index.php uses the thumbnail_index_bit.html to display new files. Every changes in the thumbnail_bit.html has no effect by browsing "yourwebsite/index.php".
Step3:
download the files from Highslide js
http://highslide.com/download.php
Copy the highslide Folder to your /4images/js/ folder. Look after your copy like this:
/js
/js/highslide
/js/highslide/graphics
/js/highslide/highslide-html.js
/js/highslide/highslide-html.packed.js
/js/highslide/highslide.js
/js/highslide/highslide.packed.js
/js/highslide/swfobject.js
Step4:
Open /templates/default/header.html and insert above
{if has_rss}
<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />
these code
<script type="text/javascript" src="{SCRIPT_URL}js/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="{SCRIPT_URL}js/highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '{SCRIPT_URL}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 = 800;
hs.height = 600;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 1,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
Step5:
Open /templates/default/thumbnail_bit.html
replace all with this (I used for this Addon the default 4images thumbnail_bit.html):
<!-- 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}
Now, when you click on the thumbail, the Image zooms direct to your screen :-)
I hope this works for you. It works for me with 4Images 1.7.4 / 1.7.6 / 1.7.7
If you have problems with the PATH, please use the absolute path, see here.....
If you get some error, or this will not work, or the server must have the absolute path, then take a look here:
http://www.4homepages.de/forum/index.php?topic=20461.msg111627#msg111627
Für alle die in der thumbnail_bit.html oder so die Quelle {media_src_big} haben, sollten diese counterupdate.php nutzen.
http://www.4homepages.de/forum/index.php?topic=20461.msg143119#msg143119
Greets
Ingo
-
... das sieht ja absolut perfekt bei dir aus ... Klasse ... !
... doch leider wird bei dieser Art der Bildbetrachtung der Bild-Hit-Counter außer Kraft gesetzt ... schade eigentlich ...
... werde es trotzdem bei mir testen ...
... hätte dieses Addon gerne nach Mods & Plugins (Releases & Support) verschoben ... *)
*) geht leider nicht, da mir in diesem Teil des Forums dazu die Rechte fehlen ... @Acidgod, ivan ... bitte nach nach Mods & Plugins (Requests & Discussions) verschieben ... den Rest mache ich dann ... oder Nicky nimmt sich der kompletten Sache an ...
-
Ui,
nicht nur der Counter wird ausgehoben, auch die Rechte wo Nutzer keine Rechte haben die Details zu sehen. Fällt mir gerade mal so auf...... Aber ich wüsste nun nicht, wie ich dieses ändern kann :-(
Gruß
Ingo
-
... das Problem mit den Rechten würde man über eine if / else Abfrage gelöst bekommen ...
... so dass entweder die "thumbnail_bit" oder die "thumbnail_index_bit" angezeigt wird ...
-
Habe gerade die thumbnail_bit.html wie folgt geändert
{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}
Nun klappt es auch mit den rechten. Codeupdate oben schon durchgeführt. Habe dieses in meiner Galerie nun nicht aktiviert, da sonst kein Demo vorhanden ist. Ich brauche die Userrechte nur für ein paar Detailfunktionen (download).
-
*) verschoben :)
@rinaldos,
thx a lot!
-
Added Step 7
Fix for wrong path in highslide.js. :-( I had installed this one for a long time, so I forgot that I have changed the path.
:-)
-
works it on 1.7.6?
-
I don't know, but i think that this works also on 1.7.6, because you change only an template an one line in index.php.....
If you want to test more from Highslide, you can see the codes in his example files. An it is easy to use these codes. You can do this with my short explanation.
Ingo
-
hmmm jetzt geht garnichts mehr, überall steht Highslide JS anstatt einem Thumbnails und es kommt beim draufklicken ein neues fenster anstatt dem javascript, bitte um hilfe...!!!??? danke!
siehe bild
(http://www.pic-share.eu/image/20080209/5a3d7a6f4a.jpg)
PS: ICH GLAUBE DU HAST EINE ALTE VERSION VON HIGHSLIDE BENUTZT, KANNST DU MIR SAGEN WELCHE???!!!
-
Ich nutze die aktuelle Version von HIGHSLIDE.
Auszug aus Highslide.js
/******************************************************************************
Name: Highslide JS
Version: 3.3.8 (January 26 2008)
Config: default
Author: Torstein H¯nsi
Support: http://vikjavev.no/highslide/forum
Also auch nichts alltes.
Hast du die Daten in die CSS Datei übernommen? Sind die Pfadangaben richtig (Also mit /js/highslide)?
ich hatte das Problem auch einmal, aber das lag daran das er die Thumbnails nicht gefunden hatte.
Wenn du deine thumbnail_index_bit.html wieder nach thumbnail_bit.html kopierst, hast du ja den Ursprungszustand wiederhergestellt.
teste doch mal meine thumbnail_bit.html
<table class="tablebgcolor" cellspacing="0" cellpadding="0" width="140" border="0" class="td3">
<tr>
<td height="40" colspan="0" class="td4" align="center">
<b>{image_name}</b><br/>{if image_is_new}<span class="new"><small>{lang_new}</small></span></b>{endif image_is_new}
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" width="140" border="0" class="td3" valign="top">
<tr>
<td height="140" valign="center" align="center">
<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="80" /></a>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" height="10" width="140" border="0" class="td3">
<tr>
<td valign="top" align="center">
<a href="{image_url}">Detailansicht</a>
</td>
</tr>
</table>
<table cellspacing="0" valign="top" cellpadding="0" height="170" width="140" border="0" class="td3">
<tr>
<td valign="top">
<li><a href="{cat_url}">Kategorie: {cat_name}</a></li>
<li>Dateigrˆfle : {image_file_size}</li>
<li>Dateigrˆfle dl: {download_image_file_size}</li>
<li>Datum : {image_date1}</li>
<li>Auflˆsung : {download_width}x{download_height}</li>
<li>Bildhits : {image_hits}</li>
<li>Rating : {image_rating}</li>
<li>Votes: {image_votes}</li>
<li>Downloads : {image_downloads}</li>
<li>Kommentare : {image_comments}</li>
{ifnot searchbot}<li>{download_small_button} {lightbox_small_button}</li>{endifnot searchbot}
</td>
</tr>
</table>
Gruß
Ingo
-
Step3:
download the files from Highslide js
http://vikjavev.no/highslide/download.php
His examples:
http://vikjavev.no/highslide/#examples
Copy the highslide Folder to your /4images/js folder (Not the example files). Look after your copy like this:
/js
/js/highslide
/js/highslide/graphics
/js/highslide/highslide-html.js
/js/highslide/highslide-html.packed.js
/js/highslide/highslide.js
/js/highslide/highslide.packed.js
/js/highslide/swfobject.js
(http://www.pic-share.eu/image/20080210/ef9c2e8da2.jpg)
Also deine thumbnail_bit haut auch nicht hin, siehst du auf den Unterschied bei meinen highslide files und bei deinen, liegt es vielleicht daran?
mfg beule
(http://www.pic-share.eu/image/20080210/fb1f17a51f.jpg) (http://www.pic-share.eu/image/20080210/d8df590ced.jpg)
So warum er die Thumbnails nicht angezeigt hatte habe ich nur herausgefunden!!!
Siehe veränderten 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}
Aber das die Bilder in einem java-fenster aufgehen funktioniert immernochnicht!!!
Kannst du nichtmal deine ganzen Dateien aus dem js-ordner in einer zip packen und hochladen???
-
Jetzt hab ich die ganzen Fehler gefunden, es fehlen überall in den Codes die ./js/..... für den rootpath auch in der header.html usw...!
-
Bei mir klappt das ohne den Punkt :-(
Ich hatte gerade alles auf einer "clean install" gemacht und da klappte auch alles :-( Aber wieso das bei dir mit dem absoluten Pfad nicht klappt?
Aber schön das es nun klappt. Werde mal alles bei mir mit dem PUNKT testen.....
Da dieses bei mir auch mit dem PUNKT funktioniert, habe ich meinen Code angepasst und den PUNKT im Code eingefügt. Danke für deinen Hinweis, auf den PUNKT wäre ich nicht gekommen......
Gruß
Ingo
-
habe es jetzt komplett hinbekommen, aber leider nur unter Firefox, ich glaube aber, das die meisten die meine page besuchen IE haben :-(
Aber ich versteh trotzdem noch nicht, warum diese LUPE zum vergrößern nicht auftaucht, wenn ich über das Thumbnail fahre?!?!
-
:( jetzt hab ich herausgefunden, dass nur Mitglieder den Slideeffekt sehen, als Benutzer ist alles wie vorhher, muss ich da die highslide dateien mit rechten vergeben?!
-
Hallo beule,
das glaube ich nicht.
Bei Rinaldos konnte ich es mir Anschauen auch ohne Mitgliedschaft, und es sieht gut aus.
Wichtig ist nur das Javascript auch aktiv ist, sonst funktioniert das nicht.
nobby
-
Hallo Beule
Rechte kann man nicht vergeben. ich habe bei mir alles freiegegeben, also nutze die Nutzerrechte nur für den Download. Du musst, wenn alle den highslide effekt haben sollen, die
{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}
Nun klappt es auch mit den rechten. Codeupdate oben schon durchgeführt. Habe dieses in meiner Galerie nun nicht aktiviert, da sonst kein Demo vorhanden ist. Ich brauche die Userrechte nur für ein paar Detailfunktionen (download).
if user loggedin und endif Anweisungen rausnehmen. Aber SOBAL DU DIESES MACHST, können ALLE User, auch bei gesperrten Detailansichten, die Detailansichten sehen.
Du siehst das bei mir hier:
http://rinaldos.homeip.net/cat332.htm. Du kannst über den Highslide Effekt das BILD in gross sehen, aber sobald du auf Detailansicht klickst, wirst du nicht auf die Detailansicht weitergeleitet. Da diese eigentlich nur für registrierte User freigegeben ist.
Um nirgends einen Sicherheitsmechanismus ungewollt auszuhebeln, habe ich eben hier die "Krücke" mit den IF und ENDIF Anweisungen gepostet.
Ich hoffe du verstehst wie ich das meine :-)
LG
Ingo
-
hm geht leider auch nicht, was mache ich nur falsch? :(
Nur Member können sliden, iss zwar auch nicht verkehrt aber besser wär es, wenn das alle könnten die auf die Seite kommen!
Schade! Aber trotzdem danke, vllt. könntest du ja mal via ftp-benutzer-login auf meinem server schauen?!
-
Also wenn alle sliden sollen, dann musst die thumbnail_bit.html so aussehen......
<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>
Alle IF Anweisungen entfernt. Dann können auch nicht registrierte Nutzer Die Bilder in voller Grösse sehen, obwohl dieses in den Nutzerrechten gesperrt ist. Sende mir mal die ftp Daten via PM zu.
Gruß
Ingo
-
great mod!
rinaldo - a question for you:
What are the steps of installing this mod to act like this: I dont want the zoom addon in categories pages.. only when I am in details page I want that zoom..
P.S I use Iceberg template.. but I guess this changes nothing! only the path
-
if you only want this ADDON when a useres click on a Picture (surfing the details.html)?
Then leave your thumbnail_bit.html untouched and change only your header.html and in details.html
search for {image} and change it to this one
<a href="{media_src}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="{media_src}" alt="Highslide JS"
title="Click to enlarge" height="500" /></a>
but untested, because I use my own templates!!! But I think this one should also works to you.
Gruß
Ingo
-
Just 2 words: Your're GREAT!.. thx!
just one little thing: How can I add that button when I'm expanding the pictures.. that bottom button - "expand to actual size"..
or better - too see the image from the first expand not from 2 consecutive expandings.
anyway, thx again.. I love this mod
-
er hat das selbe problem wie ich...! ^^
-
Hallo beule,
so ich habe das MOD mal auf meinem Testserver nach Anweisung installiert.
Bei mir läuft es kurioser weise gar nicht. Auch habe ich keine Fehlermeldung.
Am Wochenende will ich versuchen herauszufinden warum es nicht funktioniert.
nobby
-
Komisch, ich hatte es zwischendurch auf einer frischen 4images 1.7.6 installiert und da lief es auch nach meiner Anweisung. Ich werde nun auch nochmal suchen. setzte gerade einen jungfräulichen webserver auf. mal sehen ob es denn da läuft....
Ingo
-
@rinaldos
keine Panik, muss ja ne Ursache bei mir haben.
Und die gilt es zu finden :wink:
Deine Idee ist schon etwas edel.
nobby
-
also ich bin der 66% meinung das es mit dem ordner js/highslide zusammenhängt! ich habe diese dateien jez nochmal auf nen anderen server gehostet und in der style.css verlinkt, aber dann haut es auch nicht hin, wenn ich aber von rinaldos server verlinke klappt es prima! irgendwie eigenartig, aber geiler MOD wenn er funktioniert!
mfg
-
na dann kannst du zu 100% der Meinung sein, dann musst du einfach mal von innen nach außen alles im Ordner /js/ mit CHMOD777 freigeben, dann klappts auch mit deinem Server
also alle: .js
alle Inhalte im Ordner graphics
und zum Schluss den Ordner /js/ selbst natürlich auch
-
ähhm alles leider schon probiert, hrrr aber es findet sicherlich einer noch ne lösung, ich habe schon soviel probiert und probiert habe glaube ich 10³ Varianten probiert, hört sich viel an waren es auch! ok trotzdem geiler mod!
-
Ja, rinaldos hat aber gesagt er will das noch mal genauer prüfen :wink:
Den Kopf nicht hängen lassen, Irgendwann läuft es schon, wenn so an die 70 sind :mrgreen:
-
Ich kann den Fehler nicht finden :-(
unter http://rinaldos.homeip.net/4images/categories.php?cat_id=398 sieht man, das es funtkionieren muss. Da habe ich das ADDON in eine jungfräuliche eingebaut. und habe NICHT meine Dateien kopiert......
Als BS nutze ich LINUX opensuse 10.2 und als Webserver das XAMPP Paket für Linux in der aktuellen Version.
Ich habe aber vorsichtshalber mal meine highslide Dateien als ZIP drangehangen. Alle Dateien (incl. Ordner) haben die RECHTE rwx r xr x (755)
-
hallo @rinaldos
ich atte gestern deinen MOD eingebaut, der funktioniert 100%
der Fehler liegt hier:
<script type="text/javascript" src="/js/highslide/highslide.js"></script>
<script type="text/javascript" src="/js/highslide/highslide-html.js"></script>
einfach im Root einen Ordner: js, darein einen Ordner heightslide und da die beiden Scripte rein
CHMOD777
und
<script type="text/javascript" src="http://www.die-url.ldt/js/highslide/highslide.js"></script>
<script type="text/javascript" src="http://www.die-url.ldt/js/highslide/highslide-html.js"></script>
...und es muss gehen
-
so ich habs jetzt, und die lösung war, das irgendwie die dateien aus dem zip die rinaldos hochgeladen hat, einfach nur funzen! einfach nur komsich iss aber so... lol!
-
@rinaldos
... arbeitet absolut perfekt (http://ibhkc2.ib.funpic.de/index.php) ... danke dafür ... :D
... Hondas Hinweis auf die Verwendung des kompletten anstatt des relativen Pfades in den Scripten und in der css-Datei kann ich nur bestätigen ...
... dann werden auch alle Grafiken gefunden ...
... der einzige Wermutstropfen, der bleibt ... der Bild-Hit-Counter wird darunter leiden ... ;)
... und noch ein kleiner Haken für "Bildschützer" ... in der Browser-Statuszeile wird der komplette Pfad zum Bild angezeigt ...
-
da hast du recht @mawenzi, stimmt, der Pfad wird angezeigt
aber naja, wenn es funktioniert...
wobei, was will man Bilder schon schützen, ein einfacher Screenshot reicht, da kannst du verbergen, transparentes .gif drüber legen
wenn man es nicht klauen können soll, darf man es nicht ins Internet stellen.
Das mit dem Downloadcounter ist komisch, aber wahr! Naja, auch wieder nur was für Statistik-Freaks.
Mir ist egal, wie oft ein Bild angeguckt wird, bei Fotografen sicher auch, die wollen eh verkaufen :wink:
-
Hallo,
ich habe meine 4images iframed.
Der Mod klappt auch supi, bis auf, wenn man das Bild auf Originalgröße klickt, wird das Bild nicht außerhalb des iframes gezeigt.
Ich möchte auf Grund von Layoutproblemen, es erreichen, dass es außerhalb des iframes angezeigt wird.
Geht das? Kann mir jemand erklären wie?
Vielen Dank!
-
das wird nicht gehen!
denn es wird ja der frame angesprochen
umgehen würdest du es, wenn du die Slideshow einbaust
-
Meinst Du?
Schau mal: Lösungsansätze oder gar Lösung?
http://vikjavev.no/highslide/forum/viewtopic.php?t=1340&highlight=iframe+search (http://vikjavev.no/highslide/forum/viewtopic.php?t=1340&highlight=iframe+search)
Könnte das jemanden helfen? Ich komme da nicht weiter...
Wenn nicht, welche Slideshow meinst Du?
-
is it possible to have it register a hit within the total image hits every time someone zooms the image?
-
@griffdsp
... I think ... no ...
... if you like your website statistics, so you should not use this addon ...
-
Edit I:hmm, klappt jetzt doch ganz gut...
hat jemand zufällig schon die lösung, damit dass auch unter "neue Bilder" auf der startseite klappt?
EditII: lösung, damit es auch auf der startseite klappt: in der index.php nix ändern, hatte mich gleich gefragt, was das soll. die Abfrage ob der user eingeloggt ist, findet ja in der thumbnail_bit.htm statt
;)
-
Hallo Kai003,
tja, mit dem "herausfinden am Wochenende" ist das bei mir nichts geworden.
Ich habe da bisher nicht weiter gemacht, hatte anderes zu tun :wink:
nobby
-
hab gerade editiert, es geht nu doch... man sollte nicht zuviel auskommentieren ^^
-
hab gerade editiert, es geht nu doch... man sollte nicht zuviel auskommentieren ^^
ja, ja wenn die Finger schneller sind als das Gehirn :mrgreen:
-
EditII: lösung, damit es auch auf der startseite klappt: in der index.php nix ändern, hatte mich gleich gefragt, was das soll. die Abfrage ob der user eingeloggt ist, findet ja in der thumbnail_bit.htm statt
;)
Hallo KAI003
die Änderungen in der index.php sind ja auch nur, damit du auf der Startseite eine andere thumbnail_bit.html Datei hast. Wenn du die Änderungen in der thumbnail_index_bit.html reinpackst, dann haste du den Effekt auch auf der Startseite.
Wer natürlich, überall den gleichen Effekt haben mag, der brauch die Änderungen nicht durchzuführen.
Ich nutze zum Bsp. für die "nicht alle User Kategorien" verschiedene Templates, daher auch die andere "Start" Thumbnail_index_bit.html.
Gruß
Ingo
-
Hallo rinaldos
Super MOD - Vielen Dank!
Eine Frage habe ich:
Es werden ja verschiedene Beispiele mitgeliefert. Was muss man genau tun, um diese Beispiele umzusetzen?
Vielen Dank für deine Hilfe.
TIMT
-
Hi,
in den Beispielen (im zip highslide-3.3.12.zip) findest du die passenden html Dateien. Diese editierst diese und schaust wie die JPG Dateien eingebunden worden sind. Dies brauchst du dann ja nur auf dein Template umzusetzen.....:-)
Sprich du fügst den Verweis auf das Bild in das Template, meine Vorlage dient ja als Anhalt, nimmst die passenden CSS Codes und fügst die in die css Datei und das sollte es erstmal gewesen sein .....
Bsp. von example-no-border.html
Den CSS Code in der highslide.css mit dem hier komplett ersetzen. Achte aber auf die Pfadangaben!!!!
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid silver;
}
.highslide-wrapper {
background: white;
}
.highslide-image {
border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border-bottom: 1px solid white;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: silver;
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
padding-left: 22px;
background-image: url(highslide/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;
}
a.highslide-full-expand {
background: url(highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}
/* These must always be last */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
Dann in der thumbnail_bit oder thu,nmail_index_bit diesen Passus gegen das neue ersetzen.
(alt)
{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}
(neu)
{if user_loggedin}<a href="{media_src}" class="highslide" onclick="return hs.expand(this)">
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt="Highslide JS"
title="Click to enlarge" height="120" width="107" /></a>{endif user_loggedin}
Und voila, nun solltest du die andere Vorschau haben
-
Also nur mal so zur Frage,
es geht aber nicht das der Counter weiter gezählt wird? Oder habe ich das jetzt falsch verstanden?
-
Das ist richtig, der COUNTER wird nicht weitergezählt......
Gruss
Ingo
-
Absolut genial vielen Dank.
Hätte noch 2 Fragen. In welchen Dateien kann ich die Größe der Thumbnails ändern und wo kann ich die Einstellungen des Fensters ändern z.b das der Hintergrund abgedunkelt wird, wie in den Beispielen?
Vielen Dank
-
in welcher datei kann ich die Egenschaften von highslide ändern, wenn ich die.js dateien verändere tut sich nichts?
und die Thumbs in meinen Kategorien sind alle kleiner geworden und ich kann sie nicht mehr verändern.
Kann mir bitte jemand weiterhelfen?
Gruß
Bömmel
-
Hi,
in der thumbnail_bit findest du diesen Code:
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt="Highslide JS"
title="Click to enlarge" height="60" /></a>{endif user_loggedin}
Setze anstelle der 60 mal eine 100 in, dann sind die kleinen Bilder 100pixel hoch.
Gruß
Ingo
-
Hallo Ingo,
nun sind meine Thumbs größer, aber auch unschärfer! :( . Das geöffnete Bild ist scharf.
Kann man die Thumbs nicht mehr über das Plugin "Rebuild Thumbnails" verändern ?
Bei funktioniert es nicht mehr. Ist das eine Eigenschaft die man nicht mehr ändern kann?
Vielen Dank für Deine schnelle Antwort
Gruß
Christoph
-
jetzt habe ich es ! :idea: habe einfach die komplette Höhenangabe gelöscht.
Jetzt ist alles in Ordnung.
nochmal vielen Dank für Deinen Mod.
Gruß
Chris
-
Hi,
mit welchem Browser hast du dir das denn angeschaut. Wenn ich bei mir die Höhenangabe oder so lösche, dann wird es unter dem IE6 nicht richtig dargestellt. Aber unter dem Safari, Firefox Opera doch. Kontrolliere doch mal bitte die Einstellung mit dem IE6
Gruß
Ingo
-
Hi,
für mich sieht es im IE auch perfekt aus, übrigens nutze ich Firefox.
Danke für den Tip. Kannst gerne noch mal selber schauen.
http://kingboemmel.ki.funpic.de/4images/
Gruß
Chris
-
Hi rinaldos and thanks for thiz mod!
...That works perfect with Firefox, but wit IE shows me only a blue ribbon instead of the image to click to be enlarged! :| Some suggestions?
-
@the master
try this
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt="Highslide JS"
title="Click to enlarge" width="60" height="60" /></a>{endif user_loggedin}
I think that you have to specify the width for IE6
Gruß
Ingo
-
Thanks 4 the fast reply! Where I've to insert this snippet of code?
-
Sorry :-)
Step 5, add only the width="xx", You have to try for the right format :-)
/templates/default/thumbnail_bit.html
Gruß
Ingo
-
Sorry! IE6 in every case!
And doesn't work!
My old code:
<!-- you wish detail page in a small javascript open window, use {thumbnail_openwindow} -->
{thumbnail}<br />
<b>{image_name}</b> {if image_is_new}<sup class="new">{lang_new}</sup>{endif image_is_new} ({user_name_link})
<br />
<a href="{cat_url}">{cat_name}</a><br />
{if allow_comments}{lang_comments} {image_comments}{endif allow_comments}<br />
{lightbox_button}
My newest one:
<!-- you wish detail page in a small javascript open window, use {thumbnail_openwindow} -->
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt="Highslide JS"
title="Click to enlarge" width="90%" height="90%" /></a>{endif user_loggedin}<br />
<b>{image_name}</b> {if image_is_new}<sup class="new">{lang_new}</sup>{endif image_is_new} ({user_name_link})
<br />
<a href="{cat_url}">{cat_name}</a><br />
{if allow_comments}{lang_comments} {image_comments}{endif allow_comments}<br />
{lightbox_button}
Something that I've wrong/missed?
Also, a bad error in every single Category page, where are showed the thumbnails of each category:
Parse error: syntax error, unexpected '}' in /users/b/l/a/blackinprova/public_html/gallery/includes/template.php(101) : eval()'d code on line 3
-
<!-- you wish detail page in a small javascript open window, use {thumbnail_openwindow} -->
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt="Highslide JS"
title="Click to enlarge" width="90%" height="90%" /></a>{endif user_loggedin}<br />
<b>{image_name}</b> {if image_is_new}<sup class="new">{lang_new}</sup>{endif image_is_new}({user_name_link})
<br />
<a href="{cat_url}">{cat_name}</a><br />
{if allow_comments}{lang_comments} {image_comments}{endif allow_comments}<br />
{lightbox_button}
There a red marked endif functions, but no if functions. And try not 90%, try the value in px
-
Nothing... Same errors... :roll:
-
/>
not sure if this is the mistake, but u dont need to quote there.
same for <br />
so u have removed the {endif user_loggedin} - tag and the error still occures?
And i agree with rinaldos: use px-values instead of %
-
Hi KAi003 and also thanks to you too!
Nothing, same errors... Ok, guys, thanks for the support but I think is better 2 try with another mods... I can't force my users change theire browser... Thanks for the support, I'll try with another mod :roll:
-
Hi!
Hi KAi003 and also thanks to you too!
Nothing, same errors...
your old code:
<img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" alt="Highslide JS"
title="Click to enlarge" width="90%" height="90%" /></a>{endif user_loggedin}<br />
new code:
<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="100" /></a>
mfg Andi
-
Sorry! And how to realize this option? Sample - site autor: http://rinaldos.homeip.net/img10218.htm
:?:
-
in details.html replace {image}
<div align="center">
<a href="{media_src}" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
<img src="{media_src}" alt="Highslide JS" title="Zoom!" width="400" /></a>
</div>
-
Kann man den Mod auch mit Flash nutzen? Ich habe Flashcards und image Cards. Ich habe gesehen, dass es mit flash ebenfalls möglich sein sollte.
Gruß Patrick
-
Hallo
ich habe das highslide auch auf einem Testserver eingebaut
Klappt auch ganz gut
Aber wie bekomme ich eine Navigation unter die Bilder wie auf
http://highslide.com
Da geht das auch bei den Demos
Ich habe auch schon das js file ausgetauscht, aber es ändert sich nichts
Gruss
-
@thorstenp
Hast du in der Java Datei und in dem css File auch den richtigen Pfad zur Grafik angegeben?
Gruß
Ingo
-
Hallo
irgendiwe ändert sich ja garnichts.
Habe jetzt gelesen das es irgendwie an der css datei liegen soll, aber egal was ich ändere, es tut sich nichts
Die Links sind meiner Meinung nach richtig
Im Moment bin ich noch dabei ein wenig zu probieren.
Ein close-Button oben rechts würde mir ja schon ausreichen
Gruss
Thorsten
-
Auch in der css Datei findest du jede Menge Pfade mit
Bsp: (background-image: url(graphics/controlbar-white-small.gif);
diesen Pfad musst du zu dem Grafik Verzeichnis anpassen. Bei mir musste ich es so anpassen:
background-image: url(/js/highslide/graphics/controlbar-white-small.gif);
Ich denke wenn du in der css alle Pfade änderst, sollte es gehen ......
-
Hallo
ich werde das mal testen, allerdings bin ich momentan auf die Lightbox2 gestoen die den gleichen Effekt des Pop-Up bietet und für kommerziellen Gebrauch kostenlos ist.
Danke Dir erstmal für den Tip - ich werde es testen.
Gruss
-
Codeupdate 13.04.2009
- changed ULR to highslide.com
- changed STEP 6
- removed STEP 7
Gruß
Ingo
-
Thanks a lot for your description of the highslide integration.
I have decided to use it on my "Details" page instead of the thumbnail view to be able to "zoom" into an even larger version of the photo.
The documentation and examples of highslide make it really easy to use and integrate with 4images!
-
Hello , I wanted to connect PhotoBlog with this addon , I'm pretty sure that I didn't miss any step , but I'm fighting with this Mod all the day and I can't make it work , unfortunately most of threads here are in German and my German is poor , and I think that my problem relates to the path problem (header.html), I can see the thumbnail but when I click it says loading but nothing is happen
Can you tell me which path to use if my 4images gallery is here : http://www.dancersrecruit.com/pictures/js/highslide/...
in my highslide I don't have highslide-html.js but highslide-with-html.js , then wanting to know what transfer i have to use - binary or ASCII - binary for files , ASCII for graphics? sorry I'm very confuse and unfortunately it is very hard to read all the threads in German . Thanks Daniel
my header.html
</script>
<script type="text/javascript" src="http://www.dancersrecruit.com/pictures/js/highslide/highslide.js"></script>
<script type="text/javascript" src="http://www.dancersrecruit.com/pictures/js/highslide/highslide-with-html.js">
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 = 800;
hs.height = 600;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 1,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
my Ftp:
(http://www.dancersrecruit.com/pictures/templates/default/images/screen3.jpg)
-
Please give me your link to the Photoblog .....
-
added a codeupdate to POST 1. Fixed a Problem with the path to highslide ... Should work now for everyone :-)
-
... doch leider wird bei dieser Art der Bildbetrachtung der Bild-Hit-Counter außer Kraft gesetzt ... schade eigentlich ...
Ich habe mich einmal dran gesetzt und versucht die Schwachstelle mit dem Bildcounter zu verändern. Dazu muss man in der js Datei, bei mir die highslide-full.js etwas abändern. Dazu am Ende folgenden Code einfügen
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);
}
Nun im 4images ROOT Verzeichnis die Datei counterupdate.php erstellen
Code geändert am 13.08.2009. Auslesen der CAT_ID hinzugefügt
<?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);
$image_thumb_file = preg_replace("/http(.*?)\/data\/media\/(\w+)\//si", "", $image_thumb_file);
$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);
?>
Nun wird auch der Counter wieder hochgezählt.
Der Entwickler hatte mir den Tip gegeben:
Calling server side functions from client side code can be done through the collection of techniques labeled Ajax.
I advice that you take a look at Xajax which is a PHP library for this.
(http://xajaxproject.org/)
Call the counter function from the Highslide onAfterExpand event.
hs.Expander.prototype.onAfterExpand = function() {
count(this.content.src);
}
Best regards,
Torstein Hønsi
Die Lösung ist zwar noch nicht ganz perfekt, aber wenigstens wird nun der Counter wieder hochgezählt. Dies funktioniert bei mir mit dem TOP100 MOD, Photo Blog und überall wo ich den Highslide Effekt einsetze. Vielleicht kann einer mit fundierten Java Kenntnissen dieses verfeinern :-)
Gruß
-
... ja und was ist daran noch nicht so perfekt, wenn es doch funktioniert mit so kompakten Code ... ?
-
Perfekt wäre, wenn mann auf die PHp Datei verzichten könnte. Was ich nun noch festgestellt habe, der Hit wird nur gezählt wenn man auf das Bild klickt (ist ja auch gut) anderseits wird auch der Hit über die details.php gezählt. Ergo ist es noch nicht ganz für eine genaue Klick Statistik zu gebrauchen. Aber immerhin wird schonmal nicht der klick gezählt :-)
-
Ingo @ All,
zunächst vielen Dank für diesen tollen MOD, dessen Installation auf Anhieb tadellos funktioniert hat. :D Ein Problem bleibt zumindest bei mir, die Klickzählung läuft nicht. Ich habe bereits verschiedene Möglichkeiten probiert. Egal ob die "normalen" Bilder oder die Bilder aus dem Big- Ordner geladen werden sollen, am Hitcounter erkenne ich keinerlei Veränderung. Die Counterupdate.php liegt im root- Verzeichnis der Galerie, Highslide kann ich sowohl über einen Link als auch per Klick auf das Thumb aufrufen, nur gezählt wird halt kein Klick.
VG Frank.
-
@ Frank
... mit dem "Highslide" (java) verlässt du die 4images-Umgebung (php) und Bildklicks werden so nicht mehr in der DB gespeichert ...
... das ist bereits diverse Male besprochen worden und eine Lösung dafür habe ich noch nirgends gesehen ...
... man muss also abwägen, was man möchte ...
-
@Frank,
du hast auch die Java Datei geändert? So wie in ein paar Posts vorher beschrieben? Was sagt denn das Logfile des Webservers? Wird die Datei auch ausgeführt?
@mawenzi
Mit der Änderung, bzw dem Zusatz ist es möglich das die Datenbank bzw der Hitcounter mitgezählt wird...
Gruß
-
@rinaldos
... ja, ich hatte Tomaten auf den Augen ...
-
@mawenzi,
das passiert schonmal bei den vielen MOD's. Da verliert man schnell den Überblick :-)
-
Hallo Ingo,
zunächst vielen Dank für deine Hilfe. :thumbup: Nun, so falsch lag ich vermutlich nicht. Der Hit- Counter funktioniert in deiner Variante nach einem reload der Startseite in meiner Galerie auch mit den neuen Fotos. Der Counter wird also hochgezählt. :D
Meine eigentlich nette Idee, den registrierten Mitgliedern das Fotos aus dem Big- Ordner und der Anpassung deines Linkcodes mit {media_src_big} per Mausklick auf eine Lupe (geht übrigens auch ohne Fehler, Ingo) oder eben per Klick auf das Thumb zu präsentiren geht zwar, aber der Counter greift so nicht. Das Problem war und ist die Verknüpfung bzw. dem Aufruf der Fotos aus den big- Ordnern der jeweiligen Kategorien. Hier zählt der Counter nicht, da die counterupdate.php nicht eine Ebene höher greift. Der identische Bildname ist also nicht primär wichtig. Dieser Code müsste dann also angepasst werden, wenn Highslide auch mit den Big- Fotos gehen soll. Mal schaun.
VG Frank.
-
Hi nochmal.
Erweiterung des counterupdates. Es kam bei dem ein oder anderen zu Problemen, welche Dateien aus dem "BIG" Ordner darstellen. Mit dieser couterupdate.php ist es möglich, sowohl als auch den HIT Counter von 4images anzusteuern.
<?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);
?>
LG
-
@rinaldos
Na wenn das keine universelle Lösung ist, was dann? Damit ist der Highslide MOD inklusive einer funktionierenden Counterlösung für die Hits richtig Erwachsen geworden. Man kann ihn flexibel je nach Bedarf auf der Seite als Vorschau aus den cat- Ordnern oder wer mag, für die Anzeige der big- Fotos einsetzen. Das ist mehr, als ich vor ein paar Tagen noch erhofft hatte. :wink: Obendrein finde ich die Highslide Lösung optisch sehr ansprechnd und funktionell.
Ingo, vielen Dank für deine Fleißarbeit.
VG Frank.
-
.. und wenn ich richtig liege, dann reicht es wenn man diesen Teil vom Code mit
$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);
{if if user_loggedout}
$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);
{endif if user_loggedout}
erweitert, damit die eingeloggten User nicht gezählt werden, oder.
Ich möchte in meinem Fall nicht, dass ich selbst als Admin (einziger User!) mitgezählt werde!
-
Nich ganz, du musst das so machen
if ($user_info['user_level'] == GUEST){
$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);
}
Dann wird nur noch gezählt wenn ein GAST deine Bilder sieht :-)
Sollten auch USER nur der ADMiN gezählt werden, musst du anstelle == GUEST ein != ADMIN nehmen :-)
gruß
-
Hi Ingo, trotzdem 2 Fragen für beide highslide.js
1. geht ja nur für angemeldete User, kann man das für alle User machen?
2. wie kann man die Navi von unten mittig, nach oben rechts verschieben??
{endif user_loggedin}
{if user_loggedout}
{thumbnail}
{endif user_loggedout}
ändern in
{thumbnail}
hatte für 1. nichts gebracht, und die Navi nach oben ist genauso, wie oben das Copyright, irgendwie versteckt!
-
Hi,
ich erstelle gerade ein neues Tutorial, in dem ich alle HIGHSLIDE Mods zusammenfasse. Denke das es morgen online geht. Bitte habe noch etwas Geduld :-)
Gruß
-
Super, kein Problem.
Wenn dann noch ne Erklärung: für alle User / nur angemeldete User dabei ist, perfekt!
-
Ein neuesTutorial, welches alle andere ersetzen sollte.
http://www.4homepages.de/forum/index.php?topic=26815.0
Gruß
-
and how to do all the views were counted, in addition to admin