maximale Bildhöhe ermitteln und als Variable ausgeben.

fun2move · 28. Juni 2013

Guten Tag Gemeinde,

Ich stehe bei der Programmierung einer Gallery gerade vor einem Problem.

momentan sieht das ganze so aus:

Code:

%[
string GalleryImage1;
GalleryImage1 = Product.GalleryImage1 != "" ? Product.GalleryImage1 : "#";
string GalleryImage2;
GalleryImage2 = Product.GalleryImage2 != "" ? Product.GalleryImage2 : "#";
string GalleryImage3;
GalleryImage3 = Product.GalleryImage3 != "" ? Product.GalleryImage3 : "#";
string GalleryImage4;
GalleryImage4 = Product.GalleryImage4 != "" ? Product.GalleryImage4 : "#";

]%

<script type="text/javascript">
    
    function showHideGalleryImages () {
        var i, b, e, x, v, m;
        i='via-image-gallery-'; m=4;          
        for (a=1; a<=m; a++) {            
            e = document.getElementById (i + a);
            //if (e.src.indexOf("#") !== -1) {
            //    e.style.display = "none";
            //}
            if (!imageExists(e)) {
                e.style.display = "none";
            }
        }
    }
    
    function imageExists (img) {
        if (!img.complete) {
            return false;
        }
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            return false;
        }
        return true;
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }

    
</script>


<!-- ### ARTIKELBILD ### -->
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
					<td id="via-gallery-image-zoom-container" style="padding-bottom:10px" height="500px">
                        <img src="${Product.ListingImage}" width="580px"   id="via-gallery-image-zoom" alt=""/>
						
                   </tr>
                      <tr>

					    <td style="padding-bottom:10px; vertical-align: top;">
							<img alt="" src="${Product.OfferImage}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('via-gallery-image-zoom','','${Product.OfferImage}',1)" width="160" style="margin-left:10px; margin-bottom:10px" id="via-image-gallery-1" />
							<img alt="" src="${GalleryImage1}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('via-gallery-image-zoom','','${GalleryImage1}',1)" width="160" style="margin-left:10px; margin-bottom:10px" id="via-image-gallery-2" />
							<img alt="" src="${GalleryImage2}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('via-gallery-image-zoom','','${GalleryImage2}',1)" width="160"  style="margin-left:10px; margin-bottom:10px" id="via-image-gallery-3" />
							<img alt="" src="${GalleryImage3}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('via-gallery-image-zoom','','${GalleryImage3}',1)" width="160"
							style="margin-left:10px; margin-bottom:10px" id="via-image-gallery-4" /> 
						
                        
                      </tr>
                    </table>
                  <!-- ### ENDE ARTIKELBILD ### -->

<script type="text/javascript">

    showHideGalleryImages();

</script>

Die höhe in Zeile 68 (500px) würde ich gerne durch eine Variable ersetzen.

Diese soll die höchste höhe aus 5 Bildern angeben.

${Product.ListingImage}

${Product.OfferImage}

${GalleryImage1}

${GalleryImage2}

${GalleryImage3}

Das sollte mit einem Javascript realisierbar sein, nur leider fehlt mir jeder ansatz. Ich dachte da an etwas in richtung if-else ....

Zweck ist folgender: Die obere tabellenzeile soll nur die maximal nötige höhe haben.

ist z.B folgendes gegeben:

${Product.ListingImage} höhe: 650px

${Product.OfferImage} höhe: 450px

${GalleryImage1} höhe: 450px

${GalleryImage2} höhe: 450px

${GalleryImage3} höhe: 450px

Soll die Variable 650px sein.

Ich hoffe Ihr könnt mir da weiterhelfen. bin kurz vorm verzweifeln.

MfG Benedikt

tombe · 29. Juni 2013

Schau dir mal die Math.max Funktion an. Damit kannst du den größten Wert ermitteln.

Javascript:

var max = Math.max(bild1, bild2, ..., bildx)

fun2move · 29. Juni 2013

Hey,

Das klingt doch schonmal nach der Funktion die ich suche

jetzt müsste ich allerdings noch wissen, was die höhe eines Bildes angibt.

Sprich:

Code:

 height1 = Math.max(höhe von ${Product.ListingImage}, höhe von ${Product.OfferImage}, höhe von ${GalleryImage1}, höhe von ${GalleryImage2}, höhe von ${GalleryImage3})

stimmt das so?

Code:

 height1 = Math.max( height.${Product.ListingImage}, height.${Product.OfferImage}, height .${GalleryImage1}, height.${GalleryImage2}, height.${GalleryImage3} )

Sorry für die vielen dummen Fragen !

Liebe Grüße,

Benedikt

fun2move · 29. Juni 2013

Und wie ich das ganze dann einbette weiß ich auch noch nicht so genau .

trotzdem schonmal vielen Dank im voraus für eure Hilfe, bin halt wirklich noch vollkommen neu in Java und brauche es auch nur für diese eine Anwendung...

MfG Benedikt

tombe · 30. Juni 2013

Um ehrlich zu sein ich finde mich in deinem Code nicht richtig zurecht und tu mich deshalb ein bisschen schwer etwas genaues zu sagen.

Prinzipiell wäre es mit jQuery am einfachsten die Größe zu ermitteln und die Zeilenhöhe entsprechend einzustellen.

Hier mal ein Beispiel wie es zu lösen wäre, ich hoffe das du es auf deinen Code übertragen kannst.

Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
max = Math.max($("#bild1").attr("height"), $("#bild2").attr("height"), $("#bild3").attr("height"), $("#bild4").attr("height"));
$("#row").attr("height", max);
});
</script>

HTML:

<img src="1.png" id="bild1" height="150" />
<img src="2.png" id="bild2" height="250" />
<img src="3.png" id="bild3" height="70" />
<img src="4.png" id="bild4" height="180" />

<table border="1">
	<tr id="row">
		<td>XXX</td>
	</tr>
</table>

Beim Laden der Seite wird mit Hilfe von Math.max die Größte Höhe der Bilder ermitteln und dann der Tabellenzeile zugewiesen.

Angesprochen werden die Elemente jeweils über die ID (bild1, bild2, ..., bild4 und row) und das jeweilige Attribut (height).

maximale Bildhöhe ermitteln und als Variable ausgeben.

fun2move

Grünschnabel

tombe

Erfahrenes Mitglied

fun2move

Grünschnabel

fun2move

Grünschnabel

tombe

Erfahrenes Mitglied

Neue Beiträge