Page 1 of 2 12 Last
  1. #1

    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:

    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>
    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
    no votes  

  2. #2

    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  

  3. #3

    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  

  4. #4

    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  

  5. #5

    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>
    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.
    no votes  

  6. #6

    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  

  7. #7

    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,

    Dennis
    Last edited by meuh; 17-06-2012 at 17:56. Reason: Foutje van mij
    no votes  

  8. #8

    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  

  9. #9

    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  

  10. #10
    Huxley's Avatar
    Registered
    21/01/10
    Location
    Gent
    Posts
    3,535
    iTrader
    0
    Mentioned
    0 Post(s)
    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  

  11. #11

    Registered
    22/06/10
    Location
    Muizen (Mechelen)
    Posts
    286
    iTrader
    4 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Huxley View Post
    This quote is hidden because you are ignoring this member. Show
    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.
    Ik weet dat dat ook een manier is, maar dan ga je bij het resizen van je browser altijd wel even witruimte rechts hebben.
    no votes  

  12. #12

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Website niet beschikbaar.
    no votes  

  13. #13

    Registered
    22/06/10
    Location
    Muizen (Mechelen)
    Posts
    286
    iTrader
    4 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by BramVroy View Post
    This quote is hidden because you are ignoring this member. Show
    Website niet beschikbaar.
    Vreemd, werkt hier perfect

    http://movieviews.be/resize/index.php
    no votes  

  14. #14

    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  

  15. #15

    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,

    Dennis
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in