Addon, Highslide from Thumbnail Image

[rinaldos]

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

[TIMT]

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

[rinaldos]

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!!!!

Code: [Select]

* {
    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)

Code: [Select]

{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)

Code: [Select]

{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

[Sunny C.]

Also nur mal so zur Frage,

es geht aber nicht das der Counter weiter gezählt wird? Oder habe ich das jetzt falsch verstanden?

[rinaldos]

Das ist richtig, der COUNTER wird nicht weitergezählt......
Gruss
Ingo

[santadirk]

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

[Boemmel]

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

[rinaldos]

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

[Boemmel]

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

[Boemmel]

jetzt habe ich es !  habe einfach die komplette Höhenangabe gelöscht.
Jetzt ist alles in Ordnung.

nochmal vielen Dank für Deinen Mod.

Gruß
Chris

[rinaldos]

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

[Boemmel]

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

[The Master]

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?

[rinaldos]

@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

[The Master]

Thanks 4 the fast reply! Where I've to insert this snippet of code?