Archief - images - window resize

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
m

meuh

Legacy Member
Ik heb het volgende nodig:
Over de gehele breedte van het scherm telkens 4 afbeeldingen naast elkaar. Volgende rij terug opnieuw 4 afbeeldingen. Waar je je scherm resized moeten alle afbeeldingen mee resizen (in hoogte en breedte). Dus er moeten nog telkens 4 naast elkaar staan, die de volledig breedte van het scherm innemen.

De afbeeldingen moet wel in <div class="wrap"> blijven.
Hetgeen dat ik al heb:

HTML: 
<div id="content">
        <div class="wrap fl">
        <img src="content/pic1.jpg" width="400" height="226" alt=""/>
        </div>

        <div class="wrap fl">
        <img src="content/pic2.jpg" width="400" height="226" alt=""/>
        </div>

        <div class="wrap fl">
        <img src="content/pic3.jpg" width="400" height="226" alt="" />
        </div>

        <div class="wrap fl">
        <img src="content/pic4.jpg" width="400" height="226" alt="" />
        </div>
</div>

Mijn jquery code tot nu toe...
Code: 
$(window).resize(function(){
        var h = $(window).height();
        var w = $(window).width();
		
        $(".wrap").css('width',w/4);
		$(".wrap img").css('width',w/4);
		
		
    });

CSS:
Code: 
.fl{
	float:left;
}


Alvast bedankt !

Dennis
-

-BVR-

Legacy Member
Uw image resize is net het gemakkelijkste! Als je gewoon een procentuele width meegeeft resizet die automatisch. Het moeilijke is een dynamische margin te kunnen meegeven die uw width niet stoort of zorgt dat de laatste afbeelding van een rij naar de volgende springt. Ik heb snel een stukje code geschreven (en ben er wel trots op eigenlijk, hoewel er hier waarschijnlijk duizend plug-ins voor bestaan :p)

Fiddle. Resize dat venstertje rechtsonder wat en je zult wel zien wat ik bedoel. Ik denk dat dat meer is wat je zoekt. Afbeelding en #content width wordt geregeld via CSS, de rest via jQuery.

jQuery code:
Code: 
function imageHandler() {
    var w = $("#content").width();
    var i = $("img").width();
    var imgWMargin = (w - 4*i)/5;
    
    $("img").css("marginRight", imgWMargin);
    $(".first").css("marginLeft", imgWMargin);
    
    var h = $("#content").height();
    var j = $("img").height();
    var imgHMargin = (h - 2*j)/3;
    
    $("img").css("marginTop", imgHMargin);
}

imageHandler(); 

$(window).resize(function() {
    imageHandler();
});
m

meuh

Legacy Member
Bedankt voor je reactie BramVroy !
Dit heb ik nu al...
Maar doet nog steeds wat vreemd :p
Image resize

Aangezien de images telkens nog in een div .wrap zitten, moet dit ook aangepast worden.

Hier een voorbeeldje hoe het er ongeveer zal uitzien:
(maar ik wil geen horizontale scrollbar)
La Fille d'O

Thanks !
-

-BVR-

Legacy Member
Ge hebt last van ne Token Illegal. Ergens een kommapunt van jsfiddle gekopieerd die corrupt is en dan werkt heel uw script niet meer. Delete de kommapunt op lijn 37 en zet er een nieuwe. Uw script gaat nog niet volledig doen wat ge wilt, maar kheb eerst nog wa vraagskes:

- Waarom moet er een wrapper rond?
- Je hebt uw css nog niet aangepast (max-width: 25%)
- Moeten alle afbeeldingen recht tegen elkaar staan, of moet er margin (wat spaties) tussen zijn?
m

meuh

Legacy Member
- Waarom moet er een wrapper rond?
--> ik heb er een wrapper rondgeplaatst omdat ik op elke image een soort toolbar wil maken.

HTML: 
<div class="wrap">
<img src="" />

<div class="menu"></div>
</div>

Code: 
.wrap{
 position:relative;
}

.menu{
 position:absolute;
 width:100%;
 height:12px;
 bottom:0;
}

- Je hebt uw css nog niet aangepast (max-width: 25%)
--> dit is aangepast.

- Moeten alle afbeeldingen recht tegen elkaar staan, of moet er margin (wat spaties) tussen zijn?

--> Er mogen geen spaties tussen de afbeeldingen. Margin-top, right, bottom, left = 0.
-

-BVR-

Legacy Member
In dat geval gaat het met pure CSS ook.

Code: 
#content {
    width: 90%;
    background-color: red;
    margin: 0 auto;
    overflow: hidden;
    height: 100%;
    padding: 0;
}

.wrap {
    position: relative;
    margin: 0;
}

.fl {
    float: left;
    max-width: 400px;
    width: 25%;
}

img {
    max-width: 400px;
    max-height: 226px;
    width: 100%;
    height: auto;
}
m

meuh

Legacy Member
Bijna in orde :D
http://i47.tinypic.com/30a3zt3.png

Maar zoals je bovenstaande ziet, komen er nog geen 4 images op 1 rij.
Aangezien er rechts nog plaats is, zouden de images moeten resizen zodat de gehele breedte in beslag wordt genomen.

EDIT !
Foutje van mij...
Werkt wel !

Enorm bedankt voor je hulp :)

Grtz,

Dennis
m

meuh

Legacy Member
Nog ff een vraagje...

Als je over een afbeelding gaat, krijg je onderaan elke afbeelding een menu (momenteel een zwarte balk).
Het probleem bij mij is, dat alles menu's dan zichtbaar worden ipv enkel het menu van de afbeelding dat je hovert.

http://movieviews.be/resize/
H

Huxley

Legacy Member
Die kwaliteit van die foto's gaat toch verloren gaan bij het resizen.
'k Vind een rare manier van werken.
Ik weet natuurlijk niet wat je van plan bent maar meestal is het de gewoonte om het aantal images in de grid te laten afhangen van de schermbreedte en niet de size van je images zelf.
m

meuh

Legacy Member
Huxley zei:
Die kwaliteit van die foto's gaat toch verloren gaan bij het resizen.
'k Vind een rare manier van werken.
Ik weet natuurlijk niet wat je van plan bent maar meestal is het de gewoonte om het aantal images in de grid te laten afhangen van de schermbreedte en niet de size van je images zelf.
Klik om te vergroten...

Ik weet dat dat ook een manier is, maar dan ga je bij het resizen van je browser altijd wel even witruimte rechts hebben.
-

-BVR-

Legacy Member
Je kan de twee ook verenigen hé. Zie dit: Edit this Fiddle - jsFiddle (media queries)

Om op uw vraag te antwoorden:

Code: 
$(document).ready(function(){
$(".wrap .menu").hide();

$(".wrap").hover(function() {
    $(this).children(".menu").fadeIn();
}, function() {
    $(this).children(".menu").fadeOut();
});
});
m

meuh

Legacy Member
Hey,

Het resizen marcheert allemaal perfect, maar met de jquery lijkt iets mis te zijn...
De menu's blijven continue zichtbaar.

Grtz,

Dennis
-

-BVR-

Legacy Member
Link? Het is niet meer de vorige blijkbaar. En check ook eens of het niet weer een foute kommapunt (wslk de voorlaatste) is.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan