Bildergalerie mit imgshow: PDF Datei verlinken?

madlink

Ich habe eine Galerie angelegt mit einem scrollbaren Thumbbereich auf der linken Seite und rechts daneben öffnen sich bei klick auf die jeweiligen Bilder die vergrößerten Bilder.

Hier mal ein Auszug aus meinem Code:

</div>
</div>
</td>
<td width="500" height="400" align="center" valign="middle">
<div align="center" id="showdiv" class="showdiv">
<div align="center">
</div>
</div>
</td>

wie kann ich jetzt dafür sorgen, das auf jedem vergrößerten Bild der jeweilige Link zur dazugehörigen PDF-Datei liegt?

Sprich: ein User klickt auf ein Vorschaubild(z.B. iconpic5), dann öffnet sich ja das vergrößerte Bild rechts daneben (pic5) nun soll auf dem jeweiligen Bild (in dem Fall pic5) ein Link liegen zur PDF-Datei target blank(in dem Falle fa005.pdf). Wie kann ich das am besten realisieren, steh grad total auf dem Schlauch.

Über ernstgemeinte Vorschläge würde ich mich sehr freuen.

driver

so garnet. wenn dann musst des bild mit link auf ne html-datei packen
und die html-datei anstatt des bildes aufrufen.

madlink

ok also lege ich jetzt quasi pic1.html, pic2.html usw. an mit jeweiligem PDF-Link auf dem Bild und wie verlinke ich jetzt diese Seiten mit dem jeweiligen Vorschaubild, damit sich das jeweilige bild dann öffnet, das geht ja net mit imgshow.

driver

Code

[img]Bilder/kontrakommerz/Fauna/icons/iconpic11.jpg[/img]

ich bin nicht sicher wie dein imgshow aufgebaut is.
is des a normales window.open ? dann kannst da drin die html file öffnen

madlink

Hier mal der komplette Code der Galerieseite:

<html>

<head>
<title>faunagalerie</title>
<script type="text/javascript">
function imgshow(bild){
var target = document.getElementById("show");
target.src = bild;
}

</script>

<style type="text/css"><!--
.menu{
width:100px;
height:400px;
overflow:auto;
}

.showdiv{
height:400px;
width: 500px;
vertical-align: middle;
}

.show{
max-height: 400px;
max-width: 595px;
min-height: 400px;
min-width: 268px;
position: relative;
vertical-align: middle;
size: auto;
border: 1px;
border-color: #ffffff;
}

.thumb{
border: 1px;
border-color: #ffffff;
cursor: pointer;
}
#showdiv { background-color: #000066; height: 400px; width: 500px; vertical-align: middle; }
#menu { height: 400px; width: 100px; overflow: auto;}
--></style>
</head>
<body bgcolor="#000066" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="600" height="500" align="left">
<tr>
<td colspan="2">
<div align="left">
<font size="2" color="white" face="Verdana, Arial, Helvetica, sans-serif">Fauna </font></div>
</td>
</tr>
<tr>
<td width="100" height="400">
<div id="menu" class="menu">
<div align="center">

</div>
</div>
</td>
<td width="500" height="400" align="center" valign="middle">
<div align="center" id="showdiv" class="showdiv">
<div align="center">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

diese Seite füge ich dann über include in meine jeweilige Themenseite ein.

Auf der Themenseite befindet sich oben der Header, darunter ein Headmenue und darunter dann linke Spalte leftmenue, mittlere Spalte jeweilige Galerie, rechte Spalte rightmenue. alles includes.

driver

aso, ok. dann war des a kleines mißverständnis meinerseits.
dachte du machst n popup auf und zeigst dort das bild....

hm... da bin ich jetzt nicht der fachmann in javascript. aber ich würds mal
so versuchen:

- gib dem <a href noch ne class (z.b. show_pdf)
- übergabeparameter erweitern

Code

function imgshow(bild, pdf){

und im html

Code

[img]Bilder/kontrakommerz/Fauna/icons/iconpic11.jpg[/img]

unter

Code

var target = document.getElementById("show");
target.src = bild;

kannst dann evlt definieren

Code

var target_pdf = document.getElementById("show_pdf");
target_pfd.href = pdf;

aber keine garantie...

madlink

wird aber dann nicht die PDF-Datei auch gleich geöffnet???

driver

normal nicht, weil du sie ja nur als ziel-url setzt.

madlink

Könntest du liebenswürdiger weise mal deine Idee in den Code einbetten, weil irgendwie haut das bei mir nicht hin.

Hier nochmal der code:

<html>

<head>
<title>faunagalerie</title>
<script type="text/javascript">
function imgshow(bild){
var target = document.getElementById("show");
target.src = bild;
}

</script>

.showdiv{
height:400px;
width: 500px;
vertical-align: middle;
}

.show{
max-height: 400px;
max-width: 595px;
min-height: 400px;
min-width: 268px;
position: relative;
vertical-align: middle;
size: auto;
border: 1px;
border-color: #ffffff;
}

.thumb{
border: 1px;
border-color: #ffffff;
cursor: pointer;
}
#showdiv { background-color: #000066; height: 400px; width: 500px; vertical-align: middle; }
#menu { height: 400px; width: 100px; overflow: auto;}
--></style>
</head>
<body bgcolor="#000066" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="600" height="500" align="left">
<tr>
<td colspan="2">
<div align="left">
<font size="2" color="white" face="Verdana, Arial, Helvetica, sans-serif">Fauna </font></div>
</td>
</tr>
<tr>
<td width="100" height="400">
<div id="menu" class="menu">
<div align="center">

</div>
</div>
</td>
<td width="500" height="400" align="center" valign="middle">
<div align="center" id="showdiv" class="showdiv">
<div align="center">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

driver

warum wills heutzutage jeder vorgekaut haben ?
die anleitung is doch ganz einfach, hab sogar die codestücke
geschrieben wos reinkommt. bisserl arbeit kannste a no machen.

Tags