Comment mettre des photos comment sur le Giorgibou.com ?

gasparaunavis Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
mr_demonicon Messages postés 828 Date d'inscription Statut Membre Dernière intervention - 17 sept. 2014 à 11:25

Bonjour,
J'ai acheté le thème JS mais le vendeur n'est pas très coopératif pour nous expliquer le fonctionnement de son site, aussi pourriez-vous m'aider.
Je cherche à intégrer des photos comme sur le site de Giorgibou.com et surtout je voudrais faire la même chose que sur la page : http://www.giorgibou.com/oltre_pool.html
Vous pouvez y voir des photos rangées sur deux colonnes.
Si je copie/colle le code html pour l'ajouter dans mon site, les photos ne se mettent pas sur deux colonnes mais les unes à la suite des autres... Alors comment obtenir le même résultats ?
Voici le code html, je vois qu'il y a des class css qui n'apparaissent pas dans le thème vendus par le vendeur. Qu'est ce qui se cache derrière ces class ? Voici le code de la page :


<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Georgina Bousia | Oltre Pool & Poolbar</title>
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" href="stylesheets/screen.css">
		<script src="js/modernizr.custom.js"></script>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
    		$("body").css("display", "none");
    		$("body").fadeIn(1000);
    		$(".smooth-redirect").click(function(event){
        	event.preventDefault();
        	linkLocation = this.href;
        	$("body").fadeOut(1000, redirectPage);
    		});
    	function redirectPage() {
        window.location = linkLocation;
    	}
		});
	</script>

	<!-- Google analytics -->

	<script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-48894456-1']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>
	</head>
	<body class="inner-projects">
		<div class="menu collapse">
			<h2>GEORGINA BOUSIA LOGO</h2>
			<h1>GEORGINA BOUSIA</h1>
			<span>architect & designer</span>
			<nav id="cbp-fbscroller" class="cbp-fbscroller">
				<a href="index.html#fbsection1" class="smooth-redirect">HOME</a>
				<a href="index.html#fbsection2" class="smooth-redirect">ABOUT</a>
				<a href="index.html#fbsection3" class="cbp-fbcurrent smooth-redirect">ARCHITECTURE</a>
				<a href="index.html#fbsection4" class="smooth-redirect">FURNITURE</a>
				<a href="index.html#fbsection5" class="smooth-redirect">GRAPHICS</a>
				<a href="index.html#fbsection6" class="smooth-redirect">CONTACT</a>
			</nav>
			<p>All right reserved 2014
				<span>Designed by <a href="https://vangeltzo.com/" target="_blank">VangelTzo</a></span>
			</p>
			<a class="tablet-close icon-menu"></a>
		</div>
		<div class="proj-wrapper">
			<div class="proj-bg">
				<img src="img/architecture/pool/pool-main.jpg" alt="" />
			</div>
			<div class="inner-container-wrapper">
				<div class="inner-container">
					<h1>ANANTI RESORT POOL <span>&</span> POOLBAR</h1>
					<small>Designed for Ananti City Resort. Construction year 2012</small>
					<ul class="inner-images clear">
						<li>
							<img src="img/architecture/pool/pool-1.jpg" alt="" />
						</li>
						<li>
							<img src="img/architecture/pool/pool-2.jpg" alt="" />
						</li>
						<li>
							<img src="img/architecture/pool/pool-4.jpg" alt="" />
						</li>
						<li>
							<img src="img/architecture/pool/pool-3.jpg" alt="" />
						</li>
					</ul>
				</div>
				<div class="more-projects">
					<div class="prev-proj clear">
						<a href="museum.html" class="smooth-redirect">
              <p><img src="img/architecture/thumbnail/museum-thumb.jpg" alt=""></p>
              MUSEUM
              <span>previous architecture project</span>
            </a>
					</div>
					<div class="next-proj clear">
						<a href="theater.html" class="smooth-redirect">
              <p><img src="img/architecture/thumbnail/theater-thumb.jpg" alt=""></p>
              THEATER DRAMA SCHOOL
              <span>next architecture project</span>
            </a>
					</div>
					<div class="back-proj">
						<a href="index.html#fbsection3" class="smooth-redirect">
							BACK TO ARCHITECTURE PROJECTS
						</a>
					</div>
				</div>
			</div>
			<a href="index.html#fbsection3" class="bl-icon bl-icon-close smooth-redirect">
				<svg height="40" version="1.1" width="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
					<g>
						<path fill="none" stroke="#fff" stroke-width="1" d="m 32,4.962098 0,53.893986" transform="matrix(0.7071,0.7071,-0.7071,0.7071,32,-13.2548)"></path>
						<path fill="none" stroke="#fff" stroke-width="" d="m 5.1127494,31.909091 53.8342436,0" transform="matrix(0.7071,0.7071,-0.7071,0.7071,32,-13.2548)"></path>
					</g>
				</svg>
			</a>
		</div>
		<script>
			$('.tablet-close').click(function(e){
    		$('.menu').toggleClass('no-collapse').toggleClass('collapse');
    		e.preventDefault();
    	});
    </script>
	</body>
</html>

Quand pensez-vous ? pourriez-vous m'aider à obtenir le meme résultats ?
Merci
Gaspar

Afficher la suite

A voir également:

Comment mettre des photos comment sur le Giorgibou.com ?
Comment partager des photos - Guide
Comment récupérer des photos sur google photos - Guide
Google photos - Télécharger - Albums photo
Comment activer le partage de photos dans google photos - Guide
Comment faire un film avec des photos sur pc - Guide

1 réponse

Réponse 1 / 1

mr_demonicon Messages postés 828 Date d'inscription Statut Membre Dernière intervention 126

Il faut telecharger les js et le jquery sinon rien ne marchera de meme les css sont utile a copier pour le style global (les colonnes colle sont definies par la fonction

<script>
   $('.tablet-close').click(function(e){
      $('.menu').toggleClass('no-collapse').toggleClass('collapse');
      e.preventDefault();
     });
    </script>

Mais ce n'est qu'une partie.
Bonne journée

Bonne continuation et n'oubliez pas le risque zéro c'est dans vos rêves.

Discussions similaires

Autoriser marketplace à accéder à toutes mes photos

Votre réponse

Discussions similaires