Página PHP desconfigura galeria de imagem

rodrigodalmolin · Outubro 13, 2016

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>

ygor.anjos · Outubro 14, 2016

cara isso parece ser coisa de CSS, provavelmente tem alguma classe igual e esta sobreescrevendo

Beraldo · Outubro 14, 2016

além do CSS, tome cuidado com aspas. Se abrir echo com aspas duplas, escape aspas duplas dentro dele. O mesmo vale para aspas simples

echo "texto \"entre aspas\"";
echo 'texto "entre aspas"';
echo 'texto "entre aspas"';
echo "texto 'entre aspas'";

Agora, Beraldo disse:
além do CSS, tome cuidado com aspas. Se abrir echo com aspas duplas, escape aspas duplas dentro dele. O mesmo vale para aspas simples
echo "texto \"entre aspas\"";
echo 'texto "entre aspas"';
echo 'texto "entre aspas"';
echo "texto 'entre aspas'";

E lembre-se de ativar todas as exibições de erro. Isso pode mostrar erros de sintaxe do PHP. Siga as dicas deste meu artigo: http://rberaldo.com.br/as-mensagens-de-erros-mais-comuns-do-php/

Entrar

Página PHP desconfigura galeria de imagem

Pergunta

rodrigodalmolin

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

ygor.anjos

Link para o comentário

Compartilhar em outros sites

Beraldo

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades