css - Twitter bootstrap carousel with pictures that are not uniform -


let me start sorry long post. i'm attempting use bootstrap carousel , unfortunately pictures have been given not uniform. example 100x200, doe 150x100, etc. aspect ratios different, letter vs landscape. ive attempted number of things, including using following helper function on load of each of images in carousel:

function scaleimage(srcwidth, srcheight, targetwidth, targetheight, fletterbox) {      var result = { width: 0, height: 0, fscaletotargetwidth: true };      if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {         return result;     }      // scale target width     var scalex1 = targetwidth;     var scaley1 = (srcheight * targetwidth) / srcwidth;      // scale target height     var scalex2 = (srcwidth * targetheight) / srcheight;     var scaley2 = targetheight;      // figure out 1 should use     var fscaleonwidth = (scalex2 > targetwidth);     if (fscaleonwidth) {         fscaleonwidth = fletterbox;     }     else {        fscaleonwidth = !fletterbox;     }      if (fscaleonwidth) {         result.width = math.floor(scalex1);         result.height = math.floor(scaley1);         result.fscaletotargetwidth = true;     }     else {         result.width = math.floor(scalex2);         result.height = math.floor(scaley2);         result.fscaletotargetwidth = false;     }     result.targetleft = math.floor((targetwidth - result.width) / 2);     result.targettop = math.floor((targetheight - result.height) / 2);      return result; }  function onimageload(evt) {          var img = evt.currenttarget;          // what's size of image , it's parent         var w = $(img).prop('naturalwidth');         var h = $(img).prop('naturalheight');         //var tw = $(img).parent().width();         //var th = $(img).parent().height();         var tw = $(img).parent().parent().parent().parent().width();         var th = $(img).parent().parent().parent().parent().height();         // compute new size , offsets         var result = scaleimage(w, h, tw, th, true);          // adjust image coordinates , size         img.width = result.width;         img.height = result.height;         $(img).css("left", result.targetleft);         $(img).css("top", result.targettop);  }

and using following each of images carousel

<img src="~/images/img1_tall.jpg" alt="tall" id="firstimage" onload="onimageload(event);" />

and first image in carousel works great, each 1 after seem end natural size , horizontally centered against top boarder of carousel.

i've changed "onload" pass values of length , width of image didn't work either, in debug seems first image kicks off "onload" event.

the effect going if ratio of container 3:4 , ratio of image 1:2, image stretch meet left , right edges , center vertically , have letter box above , below, container not change navigation buttons of carousel not move. if image 2:1, image stretch meet top , bottom centered horizontally letterboxes on right , left, again keeping navigation buttons unmoved.

any appreciated... including:

what trying crazy

do want http://jsbin.com/zotelasa/1 . code can active items w,h or other variables used in code run scale image. because of parent.parent codes applies carousels main divs can set own container.


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more