5568 sujets

Sémantique web et HTML

Lightbox personnalisée

Bonjour à tous et toutes,
je suis actuellement en train de développer un site internet de A à Z et je rencontre un petit soucis, je vous remercie d'avance pour votre aide ...

lorsque je suis sur ma page, j'aimerais qu'au click de "Voir le projet avant / après", une page "pop'up"s'affiche par dessus en pleine page, avec une image, des onglets "avant" et donc "après" etc.
J'ai réussi au clic à avoir déjà une page blanche avec une image, tout ça bien placé, mais je n'arrive pas à insérer les autres éléments cités plus haut ...
Je vous montre mon code actuel, en espérant que vous pourrez m'aider ...

<a href="images/Capture%20d%E2%80%99%C3%A9cran%202017-02-21%20%C3%A0%2017.58.28.png"  position="fixed" width="20%"  class="lightbox_trigger" >
               <p style="font-weight:800;color: rgba(0, 0, 0, 0.57);position: fixed;top: 90%;right: 15%;">Voir avant / après</p>
        </a>
        
    <div id="lightbox">
    <div id="content">
        <img src="#"/>
    </div>
    </div>    
    </div>
    
<script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
    
    <script>
jQuery(document).ready(function($) {
	
	$('.lightbox_trigger').click(function(e) {
		
		//prevent default action (hyperlink)
		e.preventDefault();
		
		var image_href = $(this).attr("href");

		if ($('#lightbox').length > 0) { // #lightbox exists
			
			$('#content').html('<img src="' + image_href + '" />'); 
            
			$('#lightbox').show();
		}
		
		else { //#lightbox does not exist - create and insert (runs 1st time only)
			
			//create HTML markup for lightbox window
			var lightbox = 
			'<div id="lightbox">' +
				'<p>X</p>' +
				'<div id="content">' + //insert clicked link's href into img src
					'<img src="' + image_href + HTMLDivElement +'" />' +
				'</div>' +	
			'</div>';
				
			//insert lightbox HTML into page
			$('body').append(lightbox);
		}
		
	});
	
	//Click anywhere on the page to get rid of lightbox window
	$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
		$('#lightbox').hide();
	});

});
</script>
Sujet clos
Aller à