Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Larger photo non responsive

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #246445
    jknetdesign
    Participant

    http://www.rumbleseatmusic.com/electrics/?brand=fender

    When you click on a guitar it pops up in a lightbox.

    What’s the best way to get the guitar photos full width on iphone portrait and landscape?

    This is the CSS I tried.

    @media only screen and ( max-width: 670px ) {
    #TB_window {
    width: 100% !important;
    left: 25% !important;
    }
    #TB_window img#TB_Image {
    margin: 15px 0 0 0 !important;
    }
    .page #TB_window #TB_Image {
    width: 100%;
    height: 100%;
    }

    #246448
    uzair
    Participant

    you can make your thickbox responsive with some jQuery I can tell you this way check this code

    $(“#TB_window”).css({marginLeft: ‘-‘ + parseInt((TB_WIDTH / 2),10) + ‘px’, width: TB_WIDTH + ‘px’});
    if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
    $(“#TB_window”).css({marginTop: ‘-‘ + parseInt((TB_HEIGHT / 2),10) + ‘px’});
    }

    #246646
    jknetdesign
    Participant

    I tried to past this jQuery in the header and did not notice any difference. Do you know how I can tweak this code?

    #246712
    Shikkediel
    Participant

    Edited – okay, the previous script isn’t working because TB_WIDTH is undefined there’s some illegal character in it, probably the quotes. Not that it would have worked otherwise I think because there is no event listener around it for when the page is ready – and the element doesn’t exist yet but is created and removed again (it looks like) with the script.

    #246713
    Shikkediel
    Participant

    Just noticed that bit of code is already in the script itself. I guess uzair was suggesting to change it.

    Near the bottom

    You could probably remove the whole thing and go with the CSS you used in the first post. That will currently be overwritten with the inline style it creates. Except that height: auto for the image seems to do a better job. And the positioning would be superfluous.

    #246715
    jknetdesign
    Participant

    Yes I left it in the header. Should I remove it and start over? Should we try CSS instead?

    #246716
    Shikkediel
    Participant

    I’d remove the code from both the header and thickbox script and go with CSS alone. That ought to work. Don’t remove the whole function though, just the content.

    #246717
    jknetdesign
    Participant

    If the position is fixed on desktop, what should I set it to in the media query?

    #246718
    jknetdesign
    Participant

    And when i do top: 0 and left: 0 it’s a mess.

    #246719
    Shikkediel
    Participant

    I’d do away with the media query and use a max-width instead, for when you want to limit the size on larger screens. And instead of the inline margins, I’d go with a transform: translate(-50%) to center it.

    Theoretically something like this:

    #TB_window {
      width: 100%;
      max-width: 1160px;
      -ms-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
    }
    
    #TB_Image {
      width: 100%;
      height: auto;
    }
    

    From what I can see that will do a horizontal and vertical centering.

    Edit – typo for the Y-direction…

    #246720
    Shikkediel
    Participant

    The only reason to change the script (and use negative margins) rather than removing those lines would be if IE8- support is needed by the way.

    #246722
    jknetdesign
    Participant

    Please refresh and take a look.

    #246723
    Shikkediel
    Participant

    Seems to work alright when you also remove those lines from the function in the thickbox script:

    function tb_position() {
    var isIE6 = typeof document.body.style.maxHeight === "undefined";
    jQuery("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
        if ( ! isIE6 ) { // take away IE6
            jQuery("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
        }
    }
    

    It’s still adding margins and overwriting the width with inline style (which has preference) at the moment.

    #246724
    jknetdesign
    Participant

    I added your jQuery to the header and no effect. Did you want me to remove the CSS?

    #246725
    Shikkediel
    Participant

    I actually meant that you would remove the lines of code inside that function – the thickbox.js script located here is the troublemaker. It creates inline style on #TB_window with that piece of code that will overwrite the CSS you created. So the lines should be neither in the header nor in the external script…

Viewing 15 posts - 1 through 15 (of 26 total)
  • The forum ‘CSS’ is closed to new topics and replies.