css - How to position jQuery slideshow inside png -
i trying put simple jquery slideshow inside of png mockup of phone simple website our app. using bootstrap , have jumbotron split 2 columns. left side have mockup phone fading screenshots , right side have logo , description. using this slideshow.
here have html
<body> <div class="container"> <div class="jumbotron text-center"> <div class="row"> <!-- slideshow left --> <div class="col-md-6"> <div class="fadein"> <img src="img/screenshot1.jpg"> <img src="img/screenshot2.jpg"> <img src="img/screenshot3.jpg"> </div> <div class="phone"> <img src="img/phone.png"> </div> </div> <!-- description right --> <div class="col-md-6"> <h1>√oots</h1> <p>this shit game.</p> </div> </div> </div> </div> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js/bootstrap.min.js"></script> <!-- slideshow plugin --> <script type="text/javascript"> $(function(){ $('.fadein img:gt(0)').hide(); setinterval(function(){ $('.fadein :first-child').fadeout() .next('img').fadein() .end().appendto('.fadein');}, 4000); }); </script> </body> and here css
.jumbotron { height: 600px; } .container { padding-top: 65px; } .fadein { position:relative; width:500px; height:332px; } .fadein img { position:absolute; left:0; top:0; } i have searched , searched , can tell needs done absolute vs. relative css. wanted site utilize bootstrap's responsive features, can see need special make slideshow that. maybe used ridiculous , know better way this?
here clean solution easier handle in case decide change layout in future. easier because have move container of phone, move screen contents inside well, without having re-position else. made phone class container slide show, , made phone mockup bg of phone class instead of using img tag. added negative z-index value screen content fitting nicely phone.
(you may want consider getting images same size mockup's screen, therefore not cutting anything).
**css** @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .jumbotron { height: 600px; } .container { padding-top: 65px; } .fadein { position:relative; width:311px; height:480px; top: 40px; z-index: -1; /* important. */ } .fadein img { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; opacity: 0.5; } .phone { width: 311px; height: 573px; background-image: url('http://www.smoothsand.com/gradeply/images/mockup%20galaxy%20nexus.png'); /* important. */ } this should work, check fiddle. hope helps.
Comments
Post a Comment