Highslide - warum geht das nicht?

Appelmus · 21.10.2008

Hallo!
Ich möchte highslide (ein schönes Script, Miniaturbilder im selben Fenster zu öffnen) in eine Html - Seite integrieren, was ich aber nicht kann.
Also habe ich den Quelltext eines Beispiels ( Miniatur eines Wassertropfens, der sich vergrößerte, wenn man das Bild anklickt, wenn man wieder klickt, wird es wieder zur Miniatur) von der Highslide Site genommen und dann dort den link zum Wassertropfenbild durch den zu meinem Bild ersetzt. Was geschieht? Mein Bild wird als Miniatur dargestellt, auf Anklicken öffnet es sich auch, jedoch nicht mit langsamen Zoom, wie das Original, sondern plötzlich und wenn ich es wieder anklicke, verschwindet es nicht, was das Original aber tut. Ich verarbeite den Quelltext in Golive.
Hat jemand ähnliches erlitten?
(http://highslide.com/)

miss.moxy · 21.10.2008

Hast du den Javascript-Teil aus dem Head auch in deinen Code eingebunden?
Ohne Quelltext tun wir uns schwer, ist ne Art Rätselraten, warum es nicht gehen könnte

Appelmus · 21.10.2008

Hallo.miss.moxy!
Ich bewundere Deinen Mut, Dich in dieses Abenteuer zu stürzen!

Unten habe ich den Quelltext, so wie ich ihn übernommen und verändert habe eingestellt. Ich habe mir das Script von der url herunter geladen, dann das Beispiel mit dem Wassertropfen ausgewählt und dort lediglich die Bilder, die ich zeigen wollte, eingesetzt. (Ich habe den veränderten Bereich orange eingefärbt.)
Nun, vielleicht kannst Du mir helfen. Ich sage im Voraus Dank!
Appelmus

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Highslide JS</title>

<!--
    1 ) Reference to the file containing the javascript.
    This file must be located on your server.
-->

<script type="text/javascript" src="highslide/highslide.js"></script>


<!--
    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 = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>


<!--
    3) These CSS-styles are necessary for the script to work. You may also put
    them in an external CSS-file. See the webpage for documentation.
-->

<style type="text/css">
.highslide-container div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}

.highslide-wrapper, .rounded-white {
    background: white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;

    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.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;
}

</style>

</head>

<body style="background-color: silver">
<div>
<!--
    4) This is how you mark up the thumbnail image with an anchor tag around it.
    The anchor's href attribute defines the URL of the full-size image.
-->

<!-- AB HIER VERÄNDERT -->

<a id="thumb1" href="bilder/Giesen.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="Bilder/Giesenthum.jpg" alt="Highslide JS"
        title="Click to enlarge" height="171" width="227" /></a>

<!-- BIS HIER VERÄNDERT -->

<!--
    5 (optional). This is how you mark up the caption. The caption must be directly
    after the anchor above.
-->

<div class="highslide-caption">
    This caption can be styled using CSS.
</div>

</div>
</body>
</html>

miss.moxy · 21.10.2008

Funktioniert bei mir ohne Probleme (hab auch den Orangen Teil angepasst).

• Hast du auch den Ordner "highslide" mit dem Javascript drin? (im selben Verzeichnis, wie dieses html-Dokument)
• Stimmen die Pfade deiner Bilder* und sind diese auch dort, wo du sie haben willst?

* bei dem Thumb steht "Bilder" und nicht "bilder"…

Appelmus · 21.10.2008

Hallo miss.moxy!
Ich hab jetzt den Pfad nochmals überprüft. Es ändert sich aber nichts;d.h. ich sehe ein Miniaturbild mit ~grauem Hintergrund. Klicke ich das Bild an, so wird es ganz plötzlich größer dargestellt und der Hintergrund ist weiß. Klicke ich in das größere Bild, tut sich nichts. Vielleicht sind die Verweise nicht in Ordnung, ich weiß es nicht. Vielleicht liegt es an Golive? Ich habe auch schon mal versucht, den Code in Rapid Weaver einzugeben, aber dort konnte ich den vorgegebenen Quellcode nicht verändern.

Im Webcontent meiner test-site sind folgende Dateien und Ordner.

Ordner: Bilder (mit den im Quellcode angegebenen)
Ordner: css
Ordner: Generateditems
Ordner: highslide
Ordner: graphics
Folgende Seiten:
index.html
Merkmale1WK.html
etc. und die
highslidx.html mit dem oben übersandten Code
Weiterhin folgende Scripte:
highslide-with-gallery.js
highslide-with-html.js
highslide.js
und zu guter Letzt:
highslidxls.gif (Wozu das an dieser Stelle ist, weiß ich auch nicht. Es ist wahrscheinlich überflüssig.)

Ob Du damit etwas anfangen kannst?
Ich hätte Dir das Ganze gerne als Bildschirmphoto zugeschickt, aber das ging nicht.
Und Danke!

Mr. D · 21.10.2008

highslide.js muss aber im Ordner highslide liegen:

src="highslide/highslide.js"

Appelmus · 21.10.2008

Hallo Mr.D!
Ich habe diesen Fehler behoben. Das Sript highslide.js ist jetzt nur noch im Ordner highslide. Jetzt wird zwar das Miniaturbild gezeigt, aber es öffnet sich kein großes Bild.

Ps. Die Veränderung im Rahmen, wenn man den Cursor über das Bild fährt, ist auch nicht mehr zu sehen.

miss.moxy · 21.10.2008

Also bei mir schaut das ganze so aus:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Highslide JS</title>

<!--
1 ) Reference to the file containing the javascript.
This file must be located on your server.
-->

<script type="text/javascript" src="highslide/highslide.js"></script>


<!--
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 = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>


<!--
3) These CSS-styles are necessary for the script to work. You may also put
them in an external CSS-file. See the webpage for documentation.
-->

<style type="text/css">
.highslide-container div {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
text-decoration: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}

.highslide-wrapper, .rounded-white {
background: white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;

border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.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;
}

</style>

</head>

<body style="background-color: silver">
<div>
<!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a id="thumb1" href="bilder/Bild5.png" class="highslide" onclick="return hs.expand(this)">
<img src="bilder/Bild5.png" alt="Highslide JS"
title="Click to enlarge" height="171" width="227" /></a>

<!--
5 (optional). This is how you mark up the caption. The caption must be directly
after the anchor above.
-->

<div class="highslide-caption">
This caption can be styled using CSS.
</div>

</div>
</body>
</html>

highslide.js und der graphics-Ordner sind 1:1 die runtergeladenen Sachen.
Liegen beide im highslide-Ordner. Bei dir nicht, soweit ich sehe. Daran könnte es liegen.

Appelmus · 21.10.2008

Hallo miss.moxy!
Großen Dank für die Lösung! :cake:

Es ist mir schon etwas peinlich, zu sagen was ich falsch gemacht habe. Ich will´s aber doch tun, weil ich denke, daß diese Fehler auch von anderen so gemacht werden könnten.
Ich bekenne,
1) daß ich zwei verschiedene Bilder in den Code eingeschrieben habe, da ich der Meinung war, man müsse ein thumnail herstellen und das original große Bild, deswegen Giesen.jpeg und Giesenthum.jpg. Durch Deine Codezeile mit Bild5.png ging mir dieser Schnitzer auf.
2) daß es auch einige Ungereimtheiten mit der Platzierung der einzelnen Dateien gab.
3) daß ich an einer Sache unschuldig bin, daß die Vorschau bei Golive den Effekt nicht darstellt, während er jetzt im Browser zu sehen ist.
Nochmals vielen Dank!
Bis zum nächsten Mal

miss.moxy · 21.10.2008

Freut mich.
Punkt 1) ist egal. Das geht auch mit Thumbnail und Originalbild. *
Ich war nur zu faul ein Thumbnail zu machen :shame:

Ich schätze, dass bei dir die Pfade nicht ganz korrekt waren, einer
der Bilder-Ordner war ja klein geschrieben.

* Das Thumbnail wird ja direkt angezeigt: <img src="Pfad/zum/Thumbnail.jpg" … />
Das Originalbild steht im Link auf dem Thumbnail: <a href="Pfad/zum/Originalbild.jpg" class="highslide" onclick="return hs.expand(this)">…</a>

Appelmus · 21.10.2008

Große Katastrophe

Es geht alles in Safari und Firefox, nicht aber im IE und in Opera.

miss.moxy · 21.10.2008

Hmmm. Dann hats da was. Laut Seite müsste es ja gehn :kopfkratz:

Ist die Seite schon online?

Appelmus · 21.10.2008

Nein, nein - aber laß gut sein für heute - ich werd noch etwas an den Einstellungen der Browser drehen

Danke für heute!

Appelmus · 21.10.2008

Hallo miss.moxy!
Ich habe den Code, den Du gepostet hast in eine Seite kopiert und dann statt des Bild 5 eines aus meinem Bilderordner eingegeben. In Safari und Firefox geht es, nicht jedoch in IE und Opera. Die Struktur der Web-Site entspricht der, die Du gepostet hast, mit dem Unterschied, daß ich die html nicht index, sondern Wassertropfen genannt habe, weil ich zuerst damit probiert habe.
Kurzum: Geht der von Dir gepostete Code auch im IE und in Opera?
Ich hoffe, Du verlierst nicht die Geduld mit mir! :cake:

miss.moxy · 21.10.2008

Opera (Mac – 9.52) hab ich grad getestet – da gehts ohne Probleme.
Welchen IE meinst du? Die Win-Version hoffentlich*

Kann ich grad nicht testen,
hab mein Book grad nicht da. Aber ich hab das schon mal bei einem Projekt von
mir verwendet und da gings mit dem IE6 + 7 auch…
Javascript ist überall aktiviert?
Ich kann meist recht gut geduldig sein :girli:

*den Mac-IE vergisst du bitte ganz schnell wieder, der ist heutzutage wirklich out of date :jaja:

Appelmus · 22.10.2008

Hallo miss.moxy, es lag an den veralteten Browsern. Mit einer neuen Version von Opera geht es, den IE kann ich leider nicht testen - aber, macht nix.
Nochmals danke!

Mr. D · 22.10.2008

So,
habe es jetzt auf folgenden Browsern getestet:

OS X 10.5:
Safari 3
Firefox 3

WinXP:
IE 7
Firefox 3

Auf allen läuft es gleich gut.

Highslide - warum geht das nicht?

Appelmus

Aktives Mitglied

miss.moxy

Aktives Mitglied

Appelmus

Aktives Mitglied

miss.moxy

Aktives Mitglied

Appelmus

Aktives Mitglied

Mr. D

Aktives Mitglied

Appelmus

Aktives Mitglied

miss.moxy

Aktives Mitglied

Appelmus

Aktives Mitglied

miss.moxy

Aktives Mitglied

Appelmus

Aktives Mitglied

miss.moxy

Aktives Mitglied

Appelmus

Aktives Mitglied

Appelmus

Aktives Mitglied

miss.moxy

Aktives Mitglied

Appelmus

Aktives Mitglied

Mr. D

Aktives Mitglied