Thread: images - window resize
-
17-06-2012, 14:45 #1Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
images - window resize
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:
Mijn jquery code tot nu toe...HTML Code:<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>
CSS:Code:$(window).resize(function(){ var h = $(window).height(); var w = $(window).width(); $(".wrap").css('width',w/4); $(".wrap img").css('width',w/4); });
Code:.fl{ float:left; }
Alvast bedankt !
Dennisno votes
-
-
17-06-2012, 15:31 #2Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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
)
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(); });Last edited by -BVR-; 18-06-2012 at 12:10.
no votes
-
17-06-2012, 16:13 #3Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
Bedankt voor je reactie BramVroy !
Dit heb ik nu al...
Maar doet nog steeds wat vreemd
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 !no votes
-
17-06-2012, 16:41 #4Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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?no votes
-
17-06-2012, 16:54 #5Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
- Waarom moet er een wrapper rond?
--> ik heb er een wrapper rondgeplaatst omdat ik op elke image een soort toolbar wil maken.
HTML Code:<div class="wrap"> <img src="" /> <div class="menu"></div> </div>
- Je hebt uw css nog niet aangepast (max-width: 25%)Code:.wrap{ position:relative; } .menu{ position:absolute; width:100%; height:12px; bottom:0; }
--> 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.no votes
-
17-06-2012, 17:32 #6Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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; }Last edited by -BVR-; 17-06-2012 at 18:00.
no votes
-
17-06-2012, 17:54 #7Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
Bijna in orde

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,
DennisLast edited by meuh; 17-06-2012 at 17:56. Reason: Foutje van mij
no votes
-
17-06-2012, 18:00 #8Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Nog 1 ding vergeten: bij img nog height: auto; zetten
no votes
-
17-06-2012, 20:17 #9Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
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/no votes
-
17-06-2012, 20:31 #10
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.no votes
-
17-06-2012, 20:38 #11Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
no votes
-
17-06-2012, 20:43 #12Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Website niet beschikbaar.
no votes
-
17-06-2012, 20:47 #13Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
Vreemd, werkt hier perfect

http://movieviews.be/resize/index.phpno votes
-
17-06-2012, 21:31 #14Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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(); }); });Last edited by -BVR-; 18-06-2012 at 10:50.
no votes
-
18-06-2012, 00:17 #15Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
Hey,
Het resizen marcheert allemaal perfect, maar met de jquery lijkt iets mis te zijn...
De menu's blijven continue zichtbaar.
Grtz,
Dennisno votes

