hi,
gerade sitze ich daran mich mit jquery auseinanderzusetzen... ich möchte gerne, dass auf meiner webseite die bilder aufpoppen, wie z.B. auf - artmessengers.de | portfolio of sebastian butt -
auf meiner seite gehen die bilder einfach auf einer neuen seite auf, wie halt typisch html... ich habe schon die dazugehörigen .js dateien, allerdings weiß ich nicht, wie ich die in meine webseite einbauen soll. ich habe nämlich eine tabelle und jedesmal werden mir fehler angezeigt egal wo ich dieses <div id="images1" hinsetze.
hier mal der quellcode, damit ihr euch mal was drunter vorstellen könnt. online könnt ihr gucken unter susi.artmessengers.de
Vielen dank schon mal für eure hilfe :'(
gerade sitze ich daran mich mit jquery auseinanderzusetzen... ich möchte gerne, dass auf meiner webseite die bilder aufpoppen, wie z.B. auf - artmessengers.de | portfolio of sebastian butt -
auf meiner seite gehen die bilder einfach auf einer neuen seite auf, wie halt typisch html... ich habe schon die dazugehörigen .js dateien, allerdings weiß ich nicht, wie ich die in meine webseite einbauen soll. ich habe nämlich eine tabelle und jedesmal werden mir fehler angezeigt egal wo ich dieses <div id="images1" hinsetze.
hier mal der quellcode, damit ihr euch mal was drunter vorstellen könnt. online könnt ihr gucken unter susi.artmessengers.de
HTML:
#<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE> susi.artmessengers.de portfolio </TITLE>
<META NAME="Author" CONTENT="Susann Häntzka">
<META NAME="Keywords" CONTENT="webdesign">
<META NAME="Description" CONTENT="2010-6-10T12:00:00+02:00">
<meta name="robots" content="index">
<meta name="language" content="de">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="EXPIRES">
<meta http-equiv="imagetoolbar" content="no">
<meta name="publisher" content="Susann Häntzka">
<meta name="page-topic" content="jquery_lib - Dynamische Bildgalerie">
<!-- jQuery - Framework -->
<link rel="stylesheet" href="../lib/iquery.tinyLightbox.css" type="text/javascript" media="screen" />
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/jquery.bgiframe.js"></script>
<script type="text/javascript" src="../lib/jquery.tinyLightbox.js"></script>
<script type="text/javascript" src="../lib/jquery.tinyLightbox.original.js"></script>
<!-- jQuery - Funktionen -->
<script src="../lib/jquery.js" type="text/javascript" language="JavaScript">
$(document).ready(function() {
$("#images1").tinyLightbox();
});
</script>
<style type="text/css">
img {
border:0;
}
a:link {
color:#ffffff;
text-decoration:none;
}
.table {
border:0;
width:1000;
height:300;
position:absolute;
top:400px;
left:175px;
padding:20px;
}
</table> border="0" width="1000" height="300" cellpadding="20px" cellspacing="20px">
.text {
font-family:verdana;
font-size:10pt;
color:#ffffff;
text-align:center;
vertical-align:middle;
}
.grau {
font-family:verdana;
font-size:12pt;
color:#ffffff;
padding:20px;
position:absolute;
background: url(bilder/grau.png);
width:550px;
left:755px;
top:500px;
}
.grau2 {
font-family:verdana;
font-size:12pt;
text-decoration:none;
color:#ffffff;
padding:20px;
position:absolute;
background: url(bilder/grau.png);
width:550px;
left:765px;
top:500px;
}
.grau3 {
font-family:verdana;
font-size:11pt;
color:#ffffff;
padding:20px;
background: url(../bilder/grau.png);
}
.button1{
position:absolute;
left:985px;
top:350px;
}
.button2{
position:absolute;
left:1170px;
top:350px;
}
.bild {
position:absolute;
left:0px;
top:0px;
}
</style>
</HEAD>
<body background="../bilder/hintergrundgrafik_grau.jpg">
<div class="bild">
<img src="../bilder/bunt.png">
</div>
<div class="button1">
<a href="../index.html"><img src="../bilder/button_home.gif"></a>
</div>
<div class="button2">
<a href="contact.html"><img src="../bilder/button_contact.gif"></a>
</div>
<div class="table">
<table cellspacing="20" cellpadding="20">
<tr>
<td width="400" height="300"><a href="../bilder/artmessengers.html" target="blank"><img src="../bilder/kleinebilder/artmessengers.jpg" alt="artmessengers.de"></a></td>
<td width="300" height="300"><div class="grau3">Als ich diese Webseite gemacht habe, wollte ich meine Fähigkeiten mit Flash verbessern. Die Fotogalerien, die ich eingefügt habe sind mit XML konfiguriert. Leider konnte ich die Flashapplikationen nicht einbauen, da ich die nicht bekommen habe.</div></td>
</tr>
<tr>
<td width="300" height="300"><div class="grau3">Ich habe diese Webseite für einen Freund gemacht, der allerdings auch bis heute keinen Inhalt für diese Seite hat. Diese Seite habe ich mit HTML und CSS selbst geskriptet </div></td>
<td width="300" height="300"><a href="../bilder/index.html" target="blank"><img src="../bilder/kleinebilder/jdbouger.jpg" alt="JD-bouger"></a></td>
</tr>
<tr>
<td width="400" height="300" id="images1"><a href="../bilder/grossebilder/flyer.jpg" title="Flyer für die sexy Campus Night"><img src="../bilder/kleinebilder/flyer.jpg"></a></td></div>
<td width="300" height="300"><div class="grau3">Dieses kleine Projekt ist ein Flyer für die "Sexy Campus Night" in Senftenberg. Den Hintergrund habe ich mit Photoshop und diversen Filtern erstellt und das Kleid von Silber zu Gold gefääbt. Außerdem habe ich bei der Frau noch einige Haare nachgezeichnet.</div></td>
</tr>
<tr>
<td width="300" height="300"><div class="grau3">Das ist eines meiner ersten Photoshopbearbeitungen, wobei ich einfach ein Glas Wein mit eitwas Licht und Brushes in Szene gesetzt habe</div></td>
<td width="300" height="300"><a href="../bilder/grossebilder/weinglas.jpg" target="blank"><img src="../bilder/kleinebilder/weinglas.jpg" alt="Produktphotographie"></a></td>
</tr>
<tr>
<td width="400" height="300"><a href="../bilder/grossebilder/Oma.jpg" target="blank"><img src="../bilder/kleinebilder/Oma.jpg" alt="Fotomontage"></a></td>
<td width="400" height="300"><div class="grau3">Hier handelt es sich um eine Photomontage, die ich für meine Oma gemacht habe :) Da sie kein Hochzeitsphoto mit ihrem verstorbenen Mann hat, habe ich meinen Vater aus einem seiner Jugendweihephotos rausretuschiert und an seine Stelle meine Oma gesetzt. Große Probleme hatte ich beim Nachstellen des Schattens, der mir auch bis jetzt nicht perfekt gelungen ist</div></td>
</tr>
<tr>
<td width="300" height="300"><div class="grau3">An unter anderem diesem Bild habe ich die Beautyretusche geübt. Neben entfernten Leberflecken und aufgehellten Augen, habe ich zum Beispiel auch die Lippen "begradigt"</div></td>
<td width="300" height="300"><a href="../bilder/grossebilder/retusche.jpg" target="blank"><img src="../bilder/kleinebilder/Retusche.jpg"></a></td>
</tr>
<tr>
<td width="400" height="300"><a href="../bilder/grossebilder/logo_2.jpg" target="blank"><img src="../bilder/kleinebilder/logo_2.jpg" alt="Logo"></a></td>
<td width="400" height="300"><div class="grau3">Wenn sie aus der Region Cottbus kommen, kommt ihnen dieses Logo vielleicht bekannt vor. Als ich bei der Lausitzer Rundschau Praktikantin war, habe ich dieses Logo für deren Dating Service entworfen.</div></td>
</tr>
<tr>
<td width="300" height="300"><div class="grau3">Das war ein anderer Entwurf für das Logo des Datings Service, den ich persönlich viel besser fand. Leider ließ sich dieser nicht realisieren, da der kleine dicke Engel ab einer bestimmten Größe wohl in einem Fleck verwandelt worden wäre</div></td>
<td width="300" height="300"><a href="../bilder/grossebilder/logo_1.jpg" target="blank"><img src="../bilder/kleinebilder/logo_1.jpg" alt="Logo"></a></td>
</tr>
<tr>
<td width="400" height="300"><a href="../bilder/grossebilder/sparfuchs.jpg" target="blank"><img src="../bilder/kleinebilder/Sparfuchs.jpg" alt="Logo"></a></td>
<td width="300" height="300"><div class="grau3">Hierbei handelt es sich ebenfalls um ein Logo für die Lausitzer Rundschau. Damals war eine Art Couponseite in Planung auf der man sich Coupons für alle möglichen Kaufhäuser und Dienstleistungen ausdrucken können sollte. Der Name dafür stand fest und ich habe das Logo dafür zuerst mit der Hand gezeichnet und anschließend in Illustrator vektorisiert.</div></td>
</tr>
<tr>
<td width="300" height="300"><div class="grau3">Das ist ein Beispiel meiner Banner, die ich erstellt habe. Dieser ist mit Flash geamcht und soll ein Fußballspiel nachstellen und für ein Fotobuch werben</div></td><td width="300" height="300"><a href="../bilder/grossebilder/fussball.swf" target="blank"><img src="../bilder/kleinebilder/fussball.jpg" alt="Flashbanner"></a></td>
</tr>
</table>
</div>
</body>
</HTML>Vielen dank schon mal für eure hilfe :'(
Zuletzt bearbeitet von einem Moderator:
