| Autor |
Nachricht |
FSchoeppe
Threadersteller
Dabei seit: 23.03.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 10.12.2007 14:03
Titel Bildergalerieproblem |
  |
|
|
Hallo hab mal ne frage an euch! Ich möchte nen mix aus zwei verschiedenen Bildergalerien einmal der domgallery und einmal der Lightbox. Nur leider Bekomme ich es nicht hin das wenn ich auf das große Bild klicke sich das Bild in der Lightbox also groß öffnet. Kann mir jemand helfen hier der Link zur SeiteHIER.
|
|
| |
  |
 |
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mo 10.12.2007 14:36
Titel
|
|
|
Jo, Code oder so parat? Und genaueres Vorhaben und Vorgehensweise wär auch gut
|
|
| |
 |
|
|
Anzeige
|
|
|
FSchoeppe
Threadersteller
Dabei seit: 23.03.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 10.12.2007 15:34
Titel
|
|
|
Also der Code:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<script type="text/javascript" src="js/showpic.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<style type="text/css">
@import 'css/style.css';
</style>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<title>navi</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (navi.psd) -->
<table id="Tabelle_01" width="482" height="364" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="../bilder/navi_01.gif" width="172" height="364" alt=""></td>
<td width="310"><div id="container">
<div align="center">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src="img/placeholder.gif" alt="Please select an image:" id="placeholder" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="showcase">
<a href="img/large/bast_image01.jpg" title="Historic Church"> <img src="img/small/image01.jpg" /></a>
<a href="img/large/bast_image02.jpg" title="Historic Church"> <img src="img/small/image02.jpg" /></a>
<img src="img/small/image03.jpg" />
<img src="img/small/image04.jpg" />
<img src="img/small/image05.jpg" />
<a href="img/large/bast_image06.jpg" title="Historic Church"> <img src="img/small/image06.jpg" /></a>
<img src="img/small/image07.jpg" />
<a href="img/large/image08.jpg" title="More Trees"> <img src="img/small/image08.jpg" alt="More Trees" /></a>
</div>
</div></td>
</tr>
</table>
</body>
</html>
|
CSS: | Code: |
*
{
border: 0;
margin: 0;
padding: 0;
}
/* =Basic HTML
----------------------------------------------------------------------*/
a
{
color: #eed;
cursor: pointer;
text-decoration: none;
}
body, html
{
height: 100%;
overflow: hidden;
}
body
{
cursor: default;
font: 11px Verdana, sans-serif;
}
img
{
font-size: 9px;
}
ol
{
list-style: none;
}
/* =Container
----------------------------------------------------------------------*/
#container
{
clear: both;
float: none;
margin-bottom: 10 px;
}
/* =Placeholder
----------------------------------------------------------------------*/
#placeholder
{
width: 300px;
height: 225px;
}
/* =Showcase
----------------------------------------------------------------------*/
#showcase
{
float: right;
overflow: no;
width: 250px;
height: 20px;
position: static;
}
#showcase img
{
margin: 0 0 5px 5px;
padding: 1px;
width: 20px;
height: 15px;
}
#showcase a:hover img
{
border-color: #fff;
}
#showcase ul
{
margin: 5px 0 0;
}
#showcase li
{
display: inline;
}
|
JS:
| Code: | function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("showcase")) return false;
var gallery = document.getElementById("showcase");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery); |
ich habe unten die kleinen Bilder die wenn ich auf sie klicke die Großen anzeigt werden. Wenn ich nun auf das große Bild klicke will ich es mit der Lightbox, also Bildschirm dunkel und bild groß, angezeigt bekommen. Wie geht das??
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mo 10.12.2007 17:15
Titel
|
|
|
ich denke, du musst dein js anpassen. aber probiere es erstma ganz simple mit folgendem:
| Code: |
<p><img src="img/placeholder.gif" rel="lightbox" alt="Please select an image:" id="placeholder" /></p>
|
|
|
| |
|
|
FSchoeppe
Threadersteller
Dabei seit: 23.03.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 11.12.2007 16:21
Titel
|
|
|
|
Ne tut sich leider gar nichts!
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 11.12.2007 16:48
Titel
|
|
|
ok, sorry. war ein kleiner schnellschuss... aber um lightbox erstmal zum laufen zu kriegen mach mal folgendes (in der selben zeile wei oben)
| Code: |
<p>
<a href="img/placeholder.gif" rel="lightbox"><img src="img/placeholder.gif" alt="Please select an image:" id="placeholder" /></a></p>
|
frickelig wirds dann in den nächsten schritten, weil dann dein js noch mehr ersetzen muss... aber guck erstma soweit, ob das zumindest lightbox aufn plan bringt...
|
|
| |
|
|
FSchoeppe
Threadersteller
Dabei seit: 23.03.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 12.12.2007 16:28
Titel
|
|
|
|
So das geht jetzt mal danke! und wie bekomm ich jetzt hin das er die richtigen bilder öffnet?
|
|
| |
|
|
orangensaft
Dabei seit: 20.04.2007
Ort: Hamburg
Alter: 33
Geschlecht:
|
Verfasst Mi 12.12.2007 17:14
Titel
|
|
|
| FSchoeppe hat geschrieben: | | und wie bekomm ich jetzt hin das er die richtigen bilder öffnet? |
Den richtigen Pfad der Bilder jeweils in den Code reinschreiben?  Keine Ahnung, was meinst du?
| Code: | <p>
<a href="PFAD DES RICHTIGEN BILDES (z.B. http://www.beispiel.de/bilder/bild1.jpg)" rel="lightbox"><img src="PFAD DES PLACEHOLDERS (z.B. http://www.beispiel.de/bilder/placeholder.jpg)" alt="Please select an image:" id="placeholder" /></a></p> |
Zuletzt bearbeitet von orangensaft am Mi 12.12.2007 17:15, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
Willkommen auf dem Portal für Mediengestalter
