rodrigodalmolin

Pessoal Estou há alguns dias com esse problema e não consigo resolver. Não sei qual a melhor maneira de explicar o problema pois não achei um tópico de regras para postagens. Mas vamos lá. Eu preciso inserir essa galeria de imagens http://myxmodels.com/temp.html em uma página PHP. O problema é quando faço isso, ele "bagunça" a galeria, retirando as opções de rolagem e jogando as imagens para baixo. Esse é o código da galeria de imagens usada no link informado anteriormente: <!-- the CSS for Smooth Div Scroll --> <link rel="Stylesheet" type="text/css" href="Smooth/css/smoothDivScroll.css" /> <!-- Styles for my specific scrolling content --> <style type="text/css"> #makeMeScrollable { width:100%; height: 330px; position: relative; } #makeMeScrollable div.scrollableArea img { position: relative; float: left; margin: 0; padding: 0; /* If you don't want the images in the scroller to be selectable, try the following block of code. It's just a nice feature that prevent the images from accidentally becoming selected/inverted when the user interacts with the scroller. */ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } </style> <div id="makeMeScrollable"> <img src="img/content/IMG_0198.jpg"/> <img src="img/content/IMG_0349.jpg"/> <img src="img/content/IMG_8533.jpg"/> <img src="img/content/IMG_8535.jpg"/> <img src="img/content/IMG_8536.jpg"/> <img src="img/content/IMG_8550.jpg"/> <img src="img/content/IMG_8614.jpg"/> <img src="img/content/IMG_8619.jpg"/> <img src="img/content/IMG_8620.jpg"/> <img src="img/content/IMG_8623.jpg"/> <img src="img/content/IMG_8633.jpg"/> <img src="img/content/IMG_8717.jpg"/> <img src="img/content/IMG_9827.jpg"/> </div> <!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG That way the browser will have loaded the images and will know the width of the images. No need to specify the width in the CSS or inline. --> <!-- jQuery library - Please load it from Google API's --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <!-- jQuery UI Widget and Effects Core (custom download) You can make your own at: http://jqueryui.com/download --> <script src="Smooth/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <!-- Latest version of jQuery Mouse Wheel by Brandon Aaron You will find it here: http://brandonaaron.net/code/mousewheel/demos --> <script src="Smooth/js/jquery.mousewheel.min.js" type="text/javascript"></script> <!-- jQuery Kinetic - for touch --> <script src="Smooth/js/jquery.kinetic.min.js" type="text/javascript"></script> <!-- Smooth Div Scroll 1.3 minified --> <script src="Smooth/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script> <!-- If you want to look at the uncompressed version you find it at Smooth/js/source/jquery.smoothDivScroll-1.3.js --> <!-- Plugin initialization --> <script type="text/javascript"> // Initialize the plugin with no custom options $(document).ready(function () { // None of the options are set $("div#makeMeScrollable").smoothDivScroll({}); }); </script> E esse é o código da página onde quero inserí-lo (http://myxmodels.com/fashion): <div data-bg-color="#01eaf5" class="header-img"> <div class="container"> <div class="skew-wrapper"> <div data-bg-image="img/content/image-51.jpg" class="bg-image"></div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-12"> <ol class="breadcrumb"> <li><a href="index">Home</a></li> <li class="active">Fashion Productions</li> </ol> <div class="page-header"> <h1 class="text-uppercase">Fashion Productions</h1> </div> </div> </div> <center><img src="http://www.myxmodels.com/img/content/Email-Marketing2.jpg"></center> </br> <div style="float: left;"> <div style='width:235px; margin-right:50px'> <h3><img src="http://www.myxmodels.com/img/content/logo-fashion.png" width="40" height="40"> EDITORIAIS DE MODA</h3> <ul> <li>Produção</li> <li>Fotógrafo</li> <li>Edição de Imagem</li> <li>Styling</li> <li>Make</li> <li>Hair</li> <li>Material Conceitual</li> </ul> </div> </div> <div style="float: left;"> <div style='width:235px; margin-right:50px'> <h3><img src="http://www.myxmodels.com/img/content/logo-fashion.png" width="40" height="40"> MATERIAL FOTOGRÁFICO</h3> <ul> <li>Foto Campanha</li> <li>Foto LookBook</li> <li>Foto Redes Sociais</li> <li>Cenografia e Produção</li> <li>Produção de Moda</li> <li>Tratamento de Imagem</li> </ul> </div> </div> <div style="float: left;"> <div style='width:235px; margin-right:50px'> <h3><img src="http://www.myxmodels.com/img/content/logo-fashion.png" width="40" height="40"> DESFILE</h3> <ul> <li>Produção</li> <li>DJ</li> <li>Organização</li> <li>Modelo</li> </ul> </div> </div> <div style="float: left;"> <div style='width:235px; margin-right:50px'> <h3><img src="http://www.myxmodels.com/img/content/logo-fashion.png" width="40" height="40"> EVENTOS</h3> <ul> <li>Planejamento</li> <li>Marketing</li> <li>Produção</li> </ul> </div> </div> <div style="clear:both"> </br> <div class="subscribe-block"> <div class="container"> <div class="row"> <div class="col-sm-6 text-right hidden-sm hidden-xs">Se misture com a Myx nas redes sociais</div> <div class="col-sm-6 text-center social-wrapper social-large"> <a href="http://www.facebook.com/myxmodels"><i class="fa fa-facebook"></i></a> <a href="instagram://user?username=myxmodels"><i class="fa fa-instagram"></i></a> <a href="https://www.snapchat.com/add/myxmodels"><i class="fa fa-snapchat"></i></a> </div> </div> </div> </div>