html - Bootstrap 3 and Isotope jQuery Image Centering -


i know asked question cant seem find suitable answer particular case.

i want following code show 2 centered images per row.

<!doctype html>  <html>  <head>      <title>james woods</title>      <!-- sets viewport responsive design -->     <meta name = "viewport" content="width=device-width, initial-scale=1.0">      <!-- core bootstrap css -->     <link href = "../css/bootstrap-custom.css" rel ="stylesheet">      <!-- custom site css -->     <link href = "../css/style.css" rel ="stylesheet">      <!-- custom creations css -->     <link href = "create-style.css" rel ="stylesheet">  </head>  <div class="container">          <div class = "panel panel-info">              <div class = "panel-heading">                 <h3 style = "text-align: center;">creations</h3>                  <div class="creations-filter">                      <a href="#all" data-filter="*" class="current">all creations</a>                     <a href="#scratch" data-filter=".scratch">scratch games</a>                     <a href="#games" data-filter=".games">html5/javacript games</a>                     <a href="#apps" data-filter=".apps">web applications</a>                     <a href="#other" data-filter=".other">other</a>                  </div>             </div>              <div class = "panel-body center">               <div class="creations-container">                  <div class="scratch">                     <img src="../img/440x250.jpg" alt="image">                 </div>                   <div class="games">                     <img src="../img/440x250.jpg" alt="image">                 </div>                   <div class="other">                     <img src="../img/440x250.jpg" alt="image">                 </div>                   <div class="games">                     <img src="../img/440x250.jpg" alt="image">                 </div>                   <div class="games">                     <img src="../img/440x250.jpg" alt="image">                 </div>                   <div class="apps">                     <img src="../img/440x250.jpg" alt="image">                 </div>               </div>          </div>        </div> <!-- end container div -->

this jquery @ end of page

<!-- isotope jquery plugin -->     <script src="../js/isotope.js" type="text/javascript"></script>      <script src = "../js/bootstrap.js"></script>     <script type="text/javascript">      $(window).load(function(){     var $container = $('.creations-container');     $container.isotope({         filter: '*',         animationoptions: {             duration: 750,             easing: 'linear',             queue: false         }     });      $('.creations-filter a').click(function(){         $('.creations-filter .current').removeclass('current');         $(this).addclass('current');          var selector = $(this).attr('data-filter');         $container.isotope({             filter: selector,             animationoptions: {                 duration: 750,                 easing: 'linear',                 queue: false             }          });          return false;         });      });  </script>

and custom css

.creations-filter {  margin-right: 10px;  color:#666; text-decoration:none; }  .creations-filter a.current {      font-weight:bold; }  .creations-filter {     text-align: center; }  .creations-container {  } img {     margin:5px; }  .isotope-item {     z-index: 2; } .isotope-hidden.isotope-item {     pointer-events: none;     z-index: 1; } .isotope, .isotope .isotope-item {   /* change duration value whatever */      -webkit-transition-duration: 0.8s;     -moz-transition-duration: 0.8s;     transition-duration: 0.8s; } .isotope {     -webkit-transition-property: height, width;     -moz-transition-property: height, width;     transition-property: height, width; } .isotope .isotope-item {     -webkit-transition-property: -webkit-transform, opacity;     -moz-transition-property: -moz-transform, opacity;     transition-property: transform, opacity; }

thank tries :)

p.s adding jsfiddle: http://jsfiddle.net/gwba8/123/ images supposed 450x260...

here did tweaks may like. unless need single image centered too.

.panel-body {     width: 920px;     margin:auto; }

http://jsfiddle.net/ergec/gwba8/125/


-

Comments

Post a Comment

Popular posts from this blog

php - regexp cyrillic filename not matches -

i take list of files php glob(."*.pdf") . files have cyrillic names. example: ООО «Рога и копыта» then load company names database , try find them in file names: preg_match("/$firm_name/ui", $file_name, $match); i have problem: firms if $firm_name visually similar $file_name , preg_match says there no match. mb_detect_encoding both variables return utf-8. there problem in file name, or maybe there encoding or something, can not understand, ask help. upd: $file_name='ООО «Рога и копыта»'; preg_match("/... .Рога и копыта./ui", $file_name, $match); as result, ОО «Рога и копыта» , 1 О missing
Read more

c# - OpenXML hanging while writing elements -

Image
i have program pulls data database, caches file , exports data multiple formats (excel, excel 2003, csv). i'm using openxml sdk 2.0 excel work. these export processes run in parallel (using parallel.foreach ), , amount of data can pretty large - e.g. csvs 800mb. during these larger exports, i've noticed writing of xml documents hang. instance, if have 8 exporting in parallel, @ point "pause". hang around same point: //this.writer openxmlwriter created worksheetpart. this.writer.writeelement(new cell() { cellvalue = new cellvalue(value), datatype = cellvalues.string }); when happens, pause debugger (vs2013 in case) , notice threads blocking around same portion of code - bit deeper in openxml sdk - stem call openxmlwriter.writeelement . i dug through source using justdecompile didn't find answers. appears there intermediary stream in use writing isolated storage , is, reason, blocking. underlying stream each of these filestream . here screenshot ...
Read more

sql - Select Query has unexpected multiple records (MS Access) -

i may tired, can't seem figure out happening. have 2 queries. query 1 has 10 fields. query 2 has 5 fields. fields 1 through 3 same in both queries. trying write select query , simple add field 5 query2 query1 result should query1 additional field (query2.field5). i join first 3 fields both queries , choose select records in query1 , in query2 match. don't know sql, use query designer. expect same number of records have query 1 instead have 3 times or more. can tell me doing wrong. tried reversing joins still seem same records. thanks in advance. here query: the fields in common divisionname , supplierid = vendorid , commodityname . select [part revenue exposed query p1].divisionname, [part revenue exposed query p1].commodityname, [part revenue exposed query p1].suppliername, [part revenue exposed query p1].partnumber, [part revenue exposed query p1].partdescription, [part revenue exposed query p1].bucode, ...
Read more