hilfdirselbst.ch
Facebook Twitter gamper-media
Tipps und Tricks zu Adobe GoLive von Dirk Levy, GoLive FAQ's von Randolph Sterna
Ralfi
Beiträge: 7
30. Jan 2003, 19:54
Beitrag #1 von 6
Bewertung:
(863 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Alternative zu Schweberahmenlösung?


Hallo Leute,
als HP-Laie habe ich mal eine grundsätzliche Frage. Ich habe mir eine Seite zusammengebastelt auf der ich eine Art Fotoalbum zeige. Da ich die kleinen Bildchen auch mal groß sehen möchte und dazu auch noch ein bißchen Text schreiben will habe ich mir die Seite selbst gebastelt und habe kein vorgeferigtes Fotoalbum genommen. Allerdings finde ich die Lösung nicht ideal. Die Vergrößerung der Bilder habe ich über Schweberahmen gelöst (d.h. beim anklicken der keinen Bilder öffnet sich ein Schweberahmen und der mit den vielen kleinen schließt sich und umgekehrt!)
So weit so gut. Nur braucht die Seite jetzt ewig zum laden - da ja alle Rahmen im Hintergrund schon mitgeladen werden.

Würde ich allerdings für jedes große Bild eine eigene Seite erstellen (dann hätte ich das Problem mit den vielen Schweberahmen nicht mehr) baut sich die Seite mit den kleinen Bildern ja jedesmal wieder von neuem auf und auch das dauert.

Hat jemand einen Vorschlag wie man das besser lösen kann? Dank im voraus und hier das Chaos zum angucken, Ralfi

http://home.t-online.de/...of%20fame/hallof.htm Top
 
X
ccm
Beiträge: 52
30. Jan 2003, 21:07
Beitrag #2 von 6
Beitrag ID: #23300
Bewertung:
(863 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Alternative zu Schweberahmenlösung?


Hallo,

Eigentlich sollten nach erstmaligem Aufrufen der Seite mit den "kleinen" Bildern die Grafikdateien im Cache liegen. Da dauert ein erneuter Seitenaufbau nicht allzu lange. Oder du versuchst mal die Aktion "neues Fenster einschieben" mit vorgegebenen Seitengrößen. Die "großen" Bilder könnten ja bereits über die Aktion "Bild vorab laden" geladen werden. Spart auch ein wenig Zeit...

Andi
als Antwort auf: [#23289] Top
 
Petra Rudolph p
Beiträge: 1554
31. Jan 2003, 07:22
Beitrag #3 von 6
Beitrag ID: #23320
Bewertung:
(863 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Alternative zu Schweberahmenlösung?


Also ich denke, so geht es nicht.
Die Seite hat 980 K und lädt mit ISDN über zwei Minuten. Und das für ein paar "Schnappschüsse".

Ein Vorschlag wäre, du läst dir von Photoshop o.ä. eine Webgalerie erstellen. Da hättest du etwa unten oder links ein Frame, in dem die kleinen Bilder angezeigt würden und auf klick würde ein zweiter Frame jeweils eine neue html-Seite öffnen.
Diese Seiten kannst du dir generieren lassen und ändern oder auch zu Fuß machen.
Ich bin ja wirklich ein Frames-Hasser aber hier würde ich dazu raten.

Gruß Petra

http://www.quicktoweb.de
als Antwort auf: [#23289] Top
 
Ralfi
Beiträge: 7
31. Jan 2003, 09:32
Beitrag #4 von 6
Beitrag ID: #23331
Bewertung:
(863 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Alternative zu Schweberahmenlösung?


Hallo Petra,

vielen Dank für den Tipp - werde das ganze mal ausprobieren. Hört sich auf jeden Fall gut an. Bin auch nicht ganz glücklich mit der langen Ladezeit der Seite - kann mich aber irgendwie nicht so recht von den großen Bildern trennen. Außerdem muß ich mit dem optimieren der Bilder ein wenig üben....die Dinger wollen einfach KBmäßig nicht kleiner werden :-)))

Gruß, Ralfi
als Antwort auf: [#23289] Top
 
exquisitus
Beiträge: 247
1. Feb 2003, 22:30
Beitrag #5 von 6
Beitrag ID: #23488
Bewertung:
(863 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Alternative zu Schweberahmenlösung?


hallo Ralfi

hier eine mögliche lösung.
so funktionierts:
- man erstelle eine html seite als template für das anschauen grosser bilder (siehe imageviewer.html)
- man erstelle eine beliebige thumb-gallery (seite mit vielen kleinen bildchen)
- beim klick auf ein thumb-image wird eine javascript funktion aufgerufen welche das grosse bild in einem popup-fenster öffnet. dabei werden der pfad zum grossen bild, die grösse desselben (breite, höhe) sowie eine beschreibung dazu übergeben.
- die funktion öffnet ein popup, lädt das template hinein, und übergibt dabei pfad, breite, höhe und beschreibung.


die idee dabei ist:
- alles was von bild zu bild gleich bleibt kommt ins template.
- alles was ändert (pfad, breite, höhe, beschreibung) wird als javascript variable übergeben.


vorteile:
- keine frames
- der user muss nur das laden was er auch anschauen will.



hier ein beispiel:


//--------- imageviewer.html

<html>

<head>
<title>Image Viewer</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
<!--
function ArgumentsObject(str) {
// by Steven Armstrong, 2003 Zürich.

// split the string to an array using ',' as the delimiter.
// the created array holds a name/value pair in each slot.
var pairs = str.split(",");

for (var i=0; i<pairs.length; i++) {

// get the position of the '=' character.
var pos = pairs.indexOf("=");
if (pos == -1) continue; //no delimiter found

// get the variable name
var argname = pairs.substring(0,pos);

// get the variable value
var argvalue = pairs.substring(pos+1);

// store the variable in the object using the given name and value
this[argname] = unescape(argvalue);
}
return this;
}//End: ArgumentsObject

// get the part of the url behind the '?'
var query = location.search.substring(1);
// create the ArgumentsObject using the query
var args = new ArgumentsObject(query);


var imageMarkup = "";
var description = "";
if (args.image) imageMarkup = '<img src="'+ args.image +'" border="0">';
if ((args.text) && (args.text != '')) description += '<p class="normal">'+args.text+'</p>';

//-->
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" cellpadding="5" cellspacing="5" border="0">
<tr>
<td align="center" valign="middle">
<script language="JavaScript1.2" type="text/javascript">
<!--
document.write(imageMarkup + description);
//-->
</script>

<p class="normal">
[&nbsp;<a href="javascript:window.close();">Fenster schliessen</a>&nbsp;]</p></td>
</tr>
</table>
</body>
</html>

//--------/ imageviewer.html




//--------- imagegallery.html

<html>

<head>
<title>Image Gallery</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
<!--
function openImageViewer(imgSrc,imgWidth,imgHeight, descr)
{
if (descr) descr = escape(descr);
var viewerUrl = "imageviewer.html";
viewerUrl += "?image="+imgSrc+",text="+descr;
var viewerName = "ImageViewer";
var viewerWidth = imgWidth+40;
var viewerHeight = imgHeight+80;
var viewerOptions = "scrollbars=auto,menubar=no,toolbar=no,location=no,status=no, resizable=yes";
imageViewer = window.open(viewerUrl, viewerName, "width=" + viewerWidth + ",height=" + viewerHeight + "," + viewerOptions);
//openWindow(viewerUrl,winWidth,winHeight,'scrollbars=auto, menubar=no,toolbar=no,location=no,status=no,resizable=yes', 0);
}
//-->
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<a href="javascript:openImageViewer('image1_lrg.gif', 300, 200, 'Die Beschreibung des 1. Bildes')">
<img src="image1_sml.gif" width="50" height="50" alt="Bildbschreibung"></a>

<a href="javascript:openImageViewer('image2_lrg.gif', 200, 400, 'Die Beschreibung des 2. Bildes')">
<img src="image2_sml.gif" width="50" height="50" alt="Bildbschreibung"></a>

</body>
</html>

//--------/ imagegallery.html


hth
gruss
Steven
als Antwort auf: [#23289] Top
 
Ralfi
Beiträge: 7
3. Feb 2003, 12:47
Beitrag #6 von 6
Beitrag ID: #23568
Bewertung:
(863 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Alternative zu Schweberahmenlösung?


Hallöchen an alle die mir eine Antwort geschrieben haben! Danke dafür. Ich werde mal den Vorschlag von Petra ausprobieren und mir mal irgendwie eine Web-Galerie zusammenstellen.
Der Vorschlag von Steven überfordert mich leider html-technisch völlig. Hab davon keine Ahnung - trotzdem vielen Dank.

Gruß, Ralfi
als Antwort auf: [#23289] Top
 
X