Java Galerie in html ... nur wie?

Elensarndil · 19.08.2010

Moin Moin ...

ich habe ein Problem mit einer Galerie, die ich in meine Homepage einbauen möchte, um nicht mit werbegespickten externen Galerien arbeiten zu müssen.
Also habe ich mal ein wenig gegoogelt und bin auf folgendes gestoßen:

Die finde ich ganz hübsch und die ist for free, also kann ich sie nutzen....
Dachte ich.
Ich habe die Anleitung verfolgt, aber ganz offensichtlich mache ich etwas... oder mehreres ... falsch.

Meinen derzeitigen Entwurf (wirklich noch in den Kinderschuhen ...

Dort wo nun auf der Startseite die Imageloop-Geschichte auftaucht soll die andere Galerie rein....(Markiere ich rot) und natürlich auch auf den anderen Seiten die entsprechende Möglichkeit bestehen. Dort sind derzeit über die Bridge erstellte Sachen zu sehen.

Hier der gekürzte Quelltext ...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>CYGrafix Hamburg Home</title>

<link href="CSS/styles.css" rel="stylesheet" type="text/css" />

</head>


<body>

<div id="wrapper">
    
  <div id="ranken">
    <img src="Contentbackground.jpg" width="1024" height="768" />
    <div id="logo"><img src="Logo-CYGrafix-Vorlage.jpg" width="475" height="165" alt="CYGrafix Logo" /></div>
    
    <!-- navigation !-->
    <!-- mainnav !-->
    <div id="mainnav"><table width="350" border="0">
 
  <tr>
    <td><a href="about.html" style="cursor:crosshair">About</a></td>
    <td><a href="vita.html" style="cursor:crosshair">Vita</a></td>
    <td><a href="contact.html" style="cursor:crosshair">Contact</a></td>
    <td><a href="links.html" style="cursor:crosshair">Links</a></td>
  </tr>
</table>
  </div>
    
    <!-- menu !-->
<div id="menubox"><img src="Menubox.jpg" width="168" height="486" alt="menu box" /></div>
            <div id="menu">
            <table width="75" border="0">
  <tr>
    <td><b>Photography </b></td>
  </tr>
  <tr>
    <td><a href="people.html" style="cursor:crosshair">People</a></td>
  </tr>
  <tr>
    <td><a href="hh.html"><img src="hh2view.png" width="100" height="35" style="cursor:crosshair" /></a></td>
  </tr>
  <tr>
    <td><a href="outside.html" style="cursor:crosshair">Outside </a></td>
  </tr>
  <tr>
    <td><a href="objects.html" style="cursor:crosshair">Objects</a></td>
  </tr>
  <tr>
    <td> <a href="animals.html" style="cursor:crosshair">Animals</a></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Art</b></td>
  </tr>
  <tr>
    <td><a href="graphit.html" style="cursor:crosshair">Graphit</a></td>
  </tr>
  <tr>
    <td><a href="paint.html" style="cursor:crosshair">Paint</a></td>
  </tr>
  <tr>
    <td><a href="glas.html" style="cursor:crosshair">Glas </a></td>
  </tr>
  <tr>
    <td> <a href="artobject.html" style="cursor:crosshair">Objects</a></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> <b><a href="projects.html" style="cursor:crosshair">Projects </a></b></td>
  </tr>
</table>

            </div>
      <!-- end navigation !-->
      <!-- Social Networks !-->


                <div id="facebook"><a href="http://www.facebook.com/cygrafix" target="_blank"><img src="facebook.jpg" width="116" height="45" style="cursor:crosshair" /></a></div>
                   <div id="myspace"><a href="http://www.myspace.de/elensarndil" target="_blank"><img src="myspace.jpg" width="118" height="43" style="cursor:crosshair" /></a></div>
                
    <!-- content !-->
    <div id="content">


 
    
        <div><embed src="http://www.imageloop.com/swf/looopSlider2.swf" flashvars="id=a16f1bd3-c290-1741-819a-12313b030221&amp;c=01,01,02,01" type="application/x-shockwave-flash" quality="high" scale="noscale" salign="l" wmode="transparent" allowScriptAccess="always" width="400" height="250" style="width:400px;height:250px;"/><div lang="de" xml:lang="de" style="width:400px;padding-top:0px;"><img alt="alle Bilder dieser Slideshow anzeigen" src="http://st.imageloop.com/_img/bt_vap_new.gif" style="border:none;display:inline;vertical-align:top;"/></a></div></div>
        </div>    
        
      
   
<!-- end content !-->
                <div id="agb"> <a href="impressum.html">AGB & Impressum</a>
                </div>
                   <!-- Ende AGB !-->
     
  </div>
 
</div>

</body>
</html>

Ich habe das nun schon einige Male durchgespielt und die downloadbaren css und script datein in den gleichen ordner geladen, in denen auch meine index.html und co liegen.

Für Tips und Tricks wäre ich dankbar.
LG aus Hamburg
Elen

ArtiHl · 19.08.2010

AW: Java Galerie in html ... nur wie?

Was den nun möchtest du imageloop einbinden oder die javascript galerie von
jondesign.net?
Momentan bindest du eine externe schockwavedatei von imageloop.com ein.

Elensarndil · 19.08.2010

AW: Java Galerie in html ... nur wie?

Moin Moin ...

Die ImageloopDatei soll raus und statt dessen die genannte Galerie eingefügt werden. Imageloop war eine Verlegenheitslösung, die mir aber eben einfach nicht so wirklich passt. ...

ArtiHl · 19.08.2010

AW: Java Galerie in html ... nur wie?

Dann poste mal den quelltext, wo du versucht hast die gallerie einzubinden.
Benutze dann bitte den <>-button im Editor(2.zeile, 2.von rechts)

Elensarndil · 19.08.2010

Ok ... drastisch, aber wahr.

Ich habe in meinem Editor hier übrigens keinen <> button. Hoffe es geht auch so ....
Hebe den entsprechenden Bereich wieder Rot hervor.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>CYGrafix Hamburg Home</title>

<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script> 

</head>


<body>

<div id="wrapper">
    
  <div id="ranken">
    <img src="Contentbackground.jpg" width="1024" height="768" />
    <div id="logo"><img src="Logo-CYGrafix-Vorlage.jpg" width="475" height="165" alt="CYGrafix Logo" /></div>
    
    <!-- navigation !-->
    <!-- mainnav !-->
    <div id="mainnav"><table width="350" border="0">
 
  <tr>
    <td><a href="about.html" style="cursor:crosshair">About</a></td>
    <td><a href="vita.html" style="cursor:crosshair">Vita</a></td>
    <td><a href="contact.html" style="cursor:crosshair">Contact</a></td>
    <td><a href="links.html" style="cursor:crosshair">Links</a></td>
  </tr>
</table>
  </div>
    
    <!-- menu !-->
<div id="menubox"><img src="Menubox.jpg" width="168" height="486" alt="menu box" /></div>
            <div id="menu">
            <table width="75" border="0">
  <tr>
    <td><b>Photography </b></td>
  </tr>
  <tr>
    <td><a href="people.html" style="cursor:crosshair">People</a></td>
  </tr>
  <tr>
    <td><a href="hh.html"><img src="hh2view.png" width="100" height="35" style="cursor:crosshair" /></a></td>
  </tr>
  <tr>
    <td><a href="outside.html" style="cursor:crosshair">Outside </a></td>
  </tr>
  <tr>
    <td><a href="objects.html" style="cursor:crosshair">Objects</a></td>
  </tr>
  <tr>
    <td> <a href="animals.html" style="cursor:crosshair">Animals</a></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td><b>Art</b></td>
  </tr>
  <tr>
    <td><a href="graphit.html" style="cursor:crosshair">Graphit</a></td>
  </tr>
  <tr>
    <td><a href="paint.html" style="cursor:crosshair">Paint</a></td>
  </tr>
  <tr>
    <td><a href="glas.html" style="cursor:crosshair">Glas </a></td>
  </tr>
  <tr>
    <td> <a href="artobject.html" style="cursor:crosshair">Objects</a></td>
  </tr>
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td> <b><a href="projects.html" style="cursor:crosshair">Projects </a></b></td>
  </tr>
</table>

            </div>
      <!-- end navigation !-->
      <!-- Social Networks !-->


                <div id="facebook"><a href="http://www.facebook.com/cygrafix" target="_blank"><img src="facebook.jpg" width="116" height="45" style="cursor:crosshair" /></a></div>
                   <div id="myspace"><a href="http://www.myspace.de/elensarndil" target="_blank"><img src="myspace.jpg" width="118" height="43" style="cursor:crosshair" /></a></div>
                
    <!-- content !-->
    <div id="content">

   <div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" title="open image" class="open"></a>
<img src="http://www.psd-tutorials.de/modules/Forum/images/brugges2006/1.jpg" class="full" />
<img src="http://www.psd-tutorials.de/modules/Forum/images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="mypage2.html" title="open image" class="open"></a>
<img src="http://www.psd-tutorials.de/modules/Forum/images/brugges2006/2.jpg" class="full" />
<img src="http://www.psd-tutorials.de/modules/Forum/images/brugges2006/2-mini.jpg" class="thumbnail" />
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready', startGallery);
useThumbGenerator: true 
</script> 
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false,
useHistoryManager: true
});
HistoryManager.start();
}
window.addEvent('domready', startGallery);
</script> 
</div>
</div> 
<!-- emd content !-->
                <div id="agb"> <a href="impressum.html">AGB & Impressum</a>
                </div>
                   <!-- Ende AGB !-->
     
  </div>
 
</div>

</body>
</html>

Ach so ... da zerhaut es mir irgendwie auch meine komplette css Formatierung ...

GELBGRUEN · 19.08.2010

AW: Java Galerie in html ... nur wie?

Wenn du sagst es zerhaut deine komplette CSS-Formatierung wuerde ich mal danach schauen ob in der CSS Datei von deiner JS-Galerie gleiche Objekte angesprochen werden wie in deiner eigenen CSS Datei.

Kennst du FF-Firebug? Sehr geschicktes Plug-In fuer den FF um genau soetwas zu ueberpruefen!

Edit: Zur erklaerung nochmal - In deiner eigenen CSS Datei hast du bestimmt auch mal allgemein den Tag "img" angesprochen, vielleicht wird dieser auch in der neuen CSS Datei von der JS-Galerie angesprochen.

ArtiHl · 19.08.2010

AW: Java Galerie in html ... nur wie?

images/brugges2006/1.jpg <-- dieses Bild existiert?
Die js dateien befinden sich im ordner "scripts", die css datei im ordner "CSS"?

Elensarndil · 19.08.2010

AW: Java Galerie in html ... nur wie?

Moin Moin. .... das css problem werde ich noch überprüfen.
Imagedatein befinden sich im image Ordner, css und scripte in den jeweiligen ordnern und sind im gleichen verzeichnis wie auch die index.html. ....

ArtiHl · 19.08.2010

AW: Java Galerie in html ... nur wie?

Hmmm, also:

HTML:

http://www.psd-tutorials.de/modules/Forum/images/brugges2006/2.jpg

Du bist dir sicher das deine Bilder auf diesen Server unter diesen pfad liegen?
Probiere mal bei deiner ersten CSS einbindung das CSS zu css zumachen, oder bei der zweiten das CSS großschreiben jenachdem ob dein ordner klein oder groß geschrieben ist.

Elensarndil · 19.08.2010

AW: Java Galerie in html ... nur wie?

Das ist ja abgefahren ... ich habe das gar nicht in irgendeiner Form besetzt mit den Images und natürlich liegen die nicht auf dem psd-tutorials server ....
Der Code sieht bei mir so aus:
<a href="mypage2.html" title="open image" class="open"></a>
<img src="images/brugges2006/2.jpg" class="full" />
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
<script type="text/javascript">
und so weiter.
Vielen Dank erstmal ... ich teste weiter.

ArtiHl · 19.08.2010

AW: Java Galerie in html ... nur wie?

Hast du vllt. die mögl. die seite mit deinem versuch die gallerie einzubinden hochladen(kannst ja in ein unterverzeichniss deiner jetztigen seite reinkopieren).
Dann können wir live mit basteln*G*

cebito · 19.08.2010

AW: Java Galerie in html ... nur wie?

ArtiHl schrieb:
Hmmm, also:

HTML:

http://www.psd-tutorials.de/modules/Forum/images/brugges2006/2.jpg

Du bist dir sicher das deine Bilder auf diesen Server unter diesen pfad liegen?
Probiere mal bei deiner ersten CSS einbindung das CSS zu css zumachen, oder bei der zweiten das CSS großschreiben jenachdem ob dein ordner klein oder groß geschrieben ist.

Das liegt hier am Forum, wird manchmal automatisch so ergänzt - blende das einfach mal gedanklich aus

@Elensarndil - lad doch das Ding mal hoch auf den Webspace, so kann doch keiner sehen, was da los ist, ob die Pfade stimmen etc. pp. Das wird doch wieder nur ne lustige Raterunde...

ArtiHl · 19.08.2010

AW: Java Galerie in html ... nur wie?

cebito schrieb:
Das liegt hier am Forum, wird manchmal automatisch so ergänzt - blende das einfach mal gedanklich aus

Ui, ok, dann weiß ich ja bescheid*G*.Ist aber auch gemein:hmpf:

cebito · 19.08.2010

AW: Java Galerie in html ... nur wie?

Elensarndil schrieb:
Ich habe in meinem Editor hier übrigens keinen <> button. Hoffe es geht auch so ....

Wirklich nicht? So wie du postest wird Quelltext nämlich schwer bzw. teilweise gar nicht lesbar.

Mal mit der Maus draufgehn und Tooltip lesen

Elensarndil · 20.08.2010

AW: Java Galerie in html ... nur wie?

Moin Moin ....

ich werde nach dem Wochenende mal versuchen die Sachen hochzuladen ...
Stand der Dinge:
Auch eine einfache Jon Galerie funktioniert bei mir nicht, selbst wenn ich eine leere html baue und nur seine Sachen einfüge.

Aufgeben??
Niemals.

Die erweiterten Buttons bekomme ich erst in der Vorschau wie ich sorben herausgefunden habe. ... ich wollte nämlich ein Pix laden, wo keine Buttons zu sehen sind ausser jene um die Schrft zu formatieren.
Jetzt bin ich aber schlauer.
Danke.

saila · 22.08.2010

AW: Java Galerie in html ... nur wie?

Hi,

wenn ich mir deinen Content oder auch Serververzeichnis ansehe, finde ich da keinen Ordner mit der Bezeichnung "images" oder "scripts". Zumindest nicht auf dem aktuellen Server, auf welchen du im ersten Post verweist.

Abgesehen davon solltest du in jedes Verzeichnis eine index.html stellen, damit man nicht einfach auf das Verzeichnis zugreifen kann - für den ersten Anfang!

Lege einfach die neue index.html auf den Server, lege die entsprechenden Verzeichnisse an und binde die CSS- / js-Files entsprechend ein. Danach sehen wir weiter. Es würde auch für das erste reichen, wenn du lediglich 3 Testbilder in das images-Verzeichnis legst. Danach kannst du das Verzeichnis entsprechend füllen.

michas · 27.08.2010

AW: Java Galerie in html ... nur wie?

Hi,

schau Dir mal deinen Quelltext an...

HTML:

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready', startGallery);
useThumbGenerator: true 
</script> 
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false,
useHistoryManager: true
});
HistoryManager.start();
}
window.addEvent('domready', startGallery);
</script>

Du definierst 2mal die gleiche Funktion und beide Funktionen sollen beim Laden der Seite angezeigt werden... Das dürfte nicht ganz funktionieren. die Lösung ist sicher ganz einfach, denn JavaScript ist kein Hexenwerk. Leg doch einfach alles mal auf einer Beispielseite ab und poste den Link. Dann sag ich Dir was da falsch ist.

LG Micha