nicht angemeldet
Image-Thumbnail-Viewer mit Kommentaren ergänzen
Moin,
ich habe mir aus dem Internet ein Image-Thumbnail-Viewer Script besorgt.
(Thumbnails werden geladen, mit Klick darauf erscheint daneben Foto in groß)
Klappt alles wunderbar, nur fehlt hier leider die Möglichkeit die Fotos zu kommentieren.
Kann mir vielleicht jemand posten, wie und wo man dieses Script ergänzen muss ?
Herzlichen Dank !
Skript:
<head>
...
<script type="text/javascript">
//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["images/photo1.jpg", ""]
dynimages[1]=["images/photo2.jpg", ""]
dynimages[2]=["images/photo3.jpg", ""]
//Preload images ("yes" or "no"):
var preloadimg="no"
//Set optional link target to be added to all images with a link:
var optlinktarget=""
//Set image border width
var imgborderwidth=1
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5 Duration=0.7)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</script>
</head>
<body>
...
<table...>
<tr>
<td><a href="#" onClick="modifyimage('dynloadarea', 0)"><img src="images/thumb1.jpg"...></a></td>
<td><a href="#" onClick="modifyimage('dynloadarea', 1)"><img src="images/thumb2.jpg"...></a></td>
<td><a href="#" onClick="modifyimage('dynloadarea', 2)"><img src="images/thumb3.jpg"...></a></td>
...
</tr>
</table>
<div id="dynloadarea" style="..."></div>
...
</body>
-
Hallo shorty.
Klappt alles wunderbar, nur fehlt hier leider die Möglichkeit die Fotos zu kommentieren. Kann mir vielleicht jemand posten, wie und wo man dieses Script ergänzen muss?
Eine Kommentar_funktion_ einzubauen ist sicher nicht das Problem. Allerdings kann man mit Javascript (abgesehen von Cookies) nichts speichern, weder client- noch serverseitig, sodass alle Kommentare vergessen sind, wenn die Seite geschlossen wird. Cookies sind da auch keine Lösung. Ergo brauchst du was serverseitiges; was, richtet sich danach, was dir zur Verfügung steht.
Freundschaft!
Siechfred--
Nichts ist schwerer einzureißen als die Mauer in den Köpfen.-
Ich möchte lediglich eine kleine Funktionserweiterung für kurze Kommentare.
Diese sollen direkt in das Script hineingeschrieben werden !Gruß shorty
-
Hallo shorty.
Ich möchte lediglich eine kleine Funktionserweiterung für kurze Kommentare.
Diese sollen direkt in das Script hineingeschrieben werden !Was soll mit den Kommentaren passieren? Soll sich der Eingebende daran ergötzen, ohne dass er sie beim nächsten Seitenaufruf wiedersieht? Doch sicher nicht, deshalb _musst_ du die Kommentare irgendwo speichern, am besten serverseitig, damit andere Besucher den Kommentar auch lesen können. Javascript kann nichts speichern (außer in Cookies), also ist diese Technologie die unsinnigste, die du für dein Vorhaben wählen kannst. Du _musst_ etwas serverseitiges verwenden, fertige Script (Perl, PHP usw.) gibt es zu tausenden in einschlägigen Scriptsammlungen.
Freundschaft!
Siechfred--
Nichts ist schwerer einzureißen als die Mauer in den Köpfen.
-
-
-
Hi,
ich habe mir aus dem Internet ein Image-Thumbnail-Viewer Script besorgt.
(Thumbnails werden geladen, mit Klick darauf erscheint daneben Foto in groß)
Klappt alles wunderbar, nur fehlt hier leider die Möglichkeit die Fotos zu kommentieren.Das nur Du die Photos selber kommentieren kannst, sollte ja inzwischen klar sein, aber ich nehme mal an, das Du auch gar nichts anders als sowas wie eine Bildunterschrift möchtest?
Dann füge sie einfach in's Bilderarray mit ein und nachher in returnimgcode() zusätzlich an das img-Element anhängen. Wahrscheinlich mußt Du mit Platzzhalter und fixer Kommentarzeichenanzahl arbeiten, damit es nicht so "wackelt", aber ich kenne ja Dein Layout nicht, kann da also nichts genaueres empfehlen.
so short
Christoph Zurnieden
-
Uff,...danke Christoph, endlich mal einer der mich versteht !!! Es geht natürlich nur um eine sehr kurze Bildunterschrift. Da für mich Javascripte aber leider (noch) böhmische Dörfer sind, helfen mir Deine gutgemeinten Tipps leider nicht viel weiter.
Trotzdem heißen Dank !so long
shorty
-
Hi,
Uff,...danke Christoph, endlich mal einer der mich versteht
Reiner Zufall ;-)
Es geht natürlich nur um eine sehr kurze Bildunterschrift. Da für mich Javascripte aber leider (noch) böhmische Dörfer sind, helfen mir Deine gutgemeinten Tipps leider nicht viel weiter.
Dann lerne Javascript. Ist nicht so schwer, wie's aussieht.
Ist auch besser so, dann kann Dir nicht irgendjemand bei solchen Fragen etwas unterschieben.Hast Du dann noch Schwierigkeiten wird Dir hier gerne (ja, _gerne_!) geholfen. Fertigen Code kannst Du hier aber nicht erwarten Bekommst ihn aber manchmal durchaus, so ist das natürlich nicht, würden Dein Posting also solange verfolgen, bis es im Archiv verschwindet. Vielleicht erbarmt sich ja doch einer?
so short
Christoph Zurnieden
-
-
-
Hallo shorty.
Nachdem nun klar ist, was du meinst, will ich mal versuchen, dir zu helfen. Dein Ansatzpunkt liegt in dieser Funktion (ich habe es mal ein wenig eingerückt, damit du siehst, wie das Ganze abläuft):
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'Dieser Zweig ist in deinem Fall wirkungslos.
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
Das ist dein Ansatzpunkt.
if (theimg[1]!="")
imghtml+='</a>'Dieser ist ebenfalls ohne Auswirkung.
return imghtml
}Die Funktion gibt im Ergebnis HTML-Code zurück, der vereinfacht so aussieht:
<img src="photo.jpg" border="...">
Diese Funktion wiederum:
function modifyimage(loadarea, imgindex)
fügt in dein DIV mit der ID "dynloadarea" (siehe HTML-Teil deines Codes) den oben stehenden HTML-Code ein. Ergo musst du dein Bild nur noch um einen Kommentar ergänzen. Den könntest du gleich in das Bildarray einfügen:
var dynimages=new Array()
dynimages[0]=["images/photo1.jpg", "", "Ein schönes Foto"]
dynimages[1]=["images/photo2.jpg", "", "Ein noch schöneres Foto"]
dynimages[2]=["images/photo3.jpg", "", "Das schönste Foto"]Dieser Array ist wie folgt aufgebaut, hinter dem Pfeil siehst du, wie du auf die einzelnen Werte zugreifst:
Bild_Nummer_n -> dynimages[n]
Pfad_zum_Bild -> dynimages[n][0]
leerer_String -> dynimages[n][1]
Kommentar -> dynimages[n][2]Den Kommentar erreichst du also über 'dynimages[n][2]'. Damit sollte alles vorhanden sein, was du brauchst. Jetzt musst du den Kommentar nur noch einbauen:
function returnimgcode(theimg){
var imghtml="";
if (theimg[1]!="") {
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">';
}
// img-Element erzeugen
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
// Kommentar anhängen
imghtml+='<p>'+theimg[2]+'</p>';
if (theimg[1]!="") { imghtml+='</a>'; }
return imghtml
}Im Ergebnis sähe der dynamische Code deines Anzeige-DIV für dein Foto 1 wie folgt aus:
<div id="dynloadarea" style="...">
<img src="foto1.jpg">
<p>Ein schönes Foto</p>
</div>Das Ganze für die Optik noch ein wenig mit CSS gewürzt, et voila!
Freundschaft!
SiechfredPS: wenn du nicht klarkommst, frage nochmal nach und biete vor allem mal ein Online-Beispiel an.
--
Nichts ist schwerer einzureißen als die Mauer in den Köpfen.