[CSS]Spry compatible met css?

[Sanity11]

Ik probeer een image gallery te maken.
Hiervoor gebruik ik spry waarmee ik een region maak en een detail region. In de region komen verkleinde plaatjes van de orginele afbeelding die wordt weergegeven in de region en in de detail region komen de orginele plaatjes. Dit werkt allemaal prima. Maar ik wil dat de verkeinde plaatjes in een vierkante div van 80 * 80 px worden weegegeven zonder dat deze vervormen. Alle andere concequenties die daarmee gemoeid gaan vind ik niet erg, als ze maar niet samengedrukt worden

Om dit te maken had ik dit bedacht:

code:

            <div spry:region="ds1" style="margin:20px 15px 20px 20px;">
                <div spry:repeat="ds1" spry:setrow="ds1" class="prod_thumbholder">
                <div style="background-image:url({thumb})">
                </div>
                                <!-- Dit werkt dus wel maar vervormt de afbeelding: <img src="{thumb}" width="{thumb_width}" height="{thumb_height}"  />-->
            <!-- end .prod_thumbholder --></div>
                <br class="clearfloat" />
                <p>&nbsp;Klik de thumbs om de afbeelding te veranderen.</p>
            </div>

Maar dat werkt niet, het pad dat wordt geplaatst {thumb} werkt niet op die manier. Weet iemand hoe ik dit anders aan kan pakken zodat het wel werkt?

Bedankt voor de reacties

[Blaise]

Welke URL staat in {thumb}? Misschien werkt het als je de background url tussen aanhalingstekens zet, dus background-image:url('{thumb}')? En waarom vervormt {thumb} als je het output in een <img>? Is {thumb} wel het goede plaatje? Kloppen {thumb_width} en {thumb_height} wel?

Heb je anders een online voorbeeld of een generated source voorbeeld? Nu is het een beetje gissen want er kan van alles misgaan.

[Sanity11]

Hee bedankt voor je reactie. Tussen aanhalingstekens heb ik al geprobeerd. Ik zou je graag een online voorbeeld laten zien maar daar is het nog niet ver genoeg voor af.

Ik weet niet precies hoe spry intern werkt. Maar volgens mij leest het alleen een pad uit een xml bestand en dat pad wordt op de plek van thumb gezet. Het lijkt er alleen op dat het alleen binnen een img tag werkt en niet in een div ?

het pad wat uit thumb wordt gehaald is gewoon een relatief pad. Dat wordt uit de volgende xml structuur gehaald:

code:

<image>
        <title>
        <p>Test6</p>
        </title>
        <thumb>
        images\spryTestImages\thumb_test_6.jpg
        </thumb>
        <full>
        images\spryTestImages\test_6.jpg
        </full>
        <description>
        <p>Omschrijving van afbeelding nummer 6</p>
        </description>
        <thumb_width>
        80
        </thumb_width>
        <thumb_height>
        80
        </thumb_height>
        <full_width>
        490
        </full_width>
        <full_height>
        500
        </full_height>
    </image>

[ Voor 14% gewijzigd door Sanity11 op 29-02-2008 15:35 ]

[Sanity11]

Ok, nu heb ik een online voorbeeld

[Sanity11]

Blaise schreef op vrijdag 29 februari 2008 @ 15:28:
Welke URL staat in {thumb}? Misschien werkt het als je de background url tussen aanhalingstekens zet, dus background-image:url('{thumb}')? En waarom vervormt {thumb} als je het output in een <img>? Is {thumb} wel het goede plaatje? Kloppen {thumb_width} en {thumb_height} wel?

Heb je anders een online voorbeeld of een generated source voorbeeld? Nu is het een beetje gissen want er kan van alles misgaan.

Mijn uitleg van vervormt is trouwens misschien een beetje wazig. Ik bedoel als het plaatje bijvoorbeeld rechthoekig is moet deze niet samengedrukt worden om een vierkantje te vormen.

[marko77]

Volgens mij kun je aan de img tag alléén de width meegeven, dan is die gefixed en wordt de hoogte op basis daarvan aangepast. Of volstaat dat niet?
Als je ook 'staande' plaatjes hebt e.d. dan dien je denk ik toch uit te lezen wat de grootste waarde is en die op 80 te fixen.

[Sanity11]

marko77 schreef op vrijdag 29 februari 2008 @ 16:12:
Volgens mij kun je aan de img tag alléén de width meegeven, dan is die gefixed en wordt de hoogte op basis daarvan aangepast. Of volstaat dat niet?
Als je ook 'staande' plaatjes hebt e.d. dan dien je denk ik toch uit te lezen wat de grootste waarde is en die op 80 te fixen.

Ik heb inderdaad ook staande plaatjes. Het ding is dat de thumbs 80 x 80 moeten blijven, anders raakt de layout daar helemaal door de war. Als ik een staand plaatje op 80 hoogte dan wordt deze gewoon samengeduwd en erin gezet. Maar dat wil ik voorkomen.

Of is er een manier om dat te voorkomen dan?

[ Voor 3% gewijzigd door Sanity11 op 29-02-2008 16:24 ]

[reddevil]

Dat is toch goed dan?

Staand plaatje op hoogte 80 zetten en breedte lekker zelf laten uitzoeken en liggend plaatje precies andersom (dus breedte op 80, hoogte auto).

[Stealth2000]

Ik zou het plaatje als achtergrond meegeven met een div. Die div stel je dan in op 80x80 en geef je een overflow:hidden; mee. Plaatjes die te groot zijn missen dus een stukje maar er treedt iig geen vervorming op.

code:

<html>
<body>

<style>

DIV.plaatje
{
    width: 80px;
    height: 80px;
    overflow: none;
    background: url(tegroot.jpg);
}

</style>

<div class="plaatje">
    &nbsp;
</div>

</body>
</html>

[marko77]

reddevil schreef op vrijdag 29 februari 2008 @ 16:29:
Dat is toch goed dan?

Staand plaatje op hoogte 80 zetten en breedte lekker zelf laten uitzoeken en liggend plaatje precies andersom (dus breedte op 80, hoogte auto).

precies, zo heb je het mooiste resultaat, zonder cropping door overflows enzo.

[Sanity11]

Stealth2000 schreef op vrijdag 29 februari 2008 @ 16:31:
Ik zou het plaatje als achtergrond meegeven met een div. Die div stel je dan in op 80x80 en geef je een overflow:hidden; mee. Plaatjes die te groot zijn missen dus een stukje maar er treedt iig geen vervorming op.

code:

<html>
<body>

<style>

DIV.plaatje
{
    width: 80px;
    height: 80px;
    overflow: none;
    background: url(tegroot.jpg);
}

</style>

<div class="plaatje">
    &nbsp;
</div>

</body>
</html>

Dat is precies wat ik wil, alleen dat lukt dus niet.

[Sanity11]

marko77 schreef op vrijdag 29 februari 2008 @ 16:33:
[...]


precies, zo heb je het mooiste resultaat, zonder cropping door overflows enzo.

Alleen hoe kan ik dat dan automatisch laten regelen? Die div waar het plaatje in zit wordt automatisch herhaald door spry.... Sorry maar ik snap niet hoe jullie dat zouden doen dan

[Sanity11]

Ah! Nou begrijp ik het.

Kijk

Ik moet nu alleen iets maken in het CMS waar men kan aangeven of de afbeelding liggend of staand is. Dan kan dat in de xml gegenereerd worden en alles werkt!! Bedankt!!!

[reddevil]

Sanity11 schreef op zaterdag 01 maart 2008 @ 11:38:
Ah! Nou begrijp ik het.

Kijk

Ik moet nu alleen iets maken in het CMS waar men kan aangeven of de afbeelding liggend of staand is. Dan kan dat in de xml gegenereerd worden en alles werkt!! Bedankt!!!

Dat kan toch automatisch uitgezocht worden door php/js/whatever... hoef je de mensen niet te laten kiezen, scheelt "handmatige fouten"

[Sanity11]

reddevil schreef op maandag 03 maart 2008 @ 08:33:
[...]


Dat kan toch automatisch uitgezocht worden door php/js/whatever... hoef je de mensen niet te laten kiezen, scheelt "handmatige fouten"

Hoi reddevil, dat wordt nu ook automatisch uitgezocht door het cms systeem. Alleen nu zie ik dat IE alleen maar een klein streepje weergeeft ?! Weet iemand misschien hoe dat kan?

[ Voor 6% gewijzigd door Sanity11 op 05-03-2008 21:25 ]

[moozzuzz]

Dat is enkel te verklaren door de uitgepoepte sourcecode te zien...