Problème lightbox personnalisé

Bonjour,

Depuis quelques jours j'essaye de mettre en place une petite lightbox, seulement, n'ayant que très peu de connaissance en js/jquery je bloque un peu sur la gestion du contenu à afficher.

Le code actuel:

<div id="boxpop">
	<div class="centered">
               /* Contenu à afficher ici */
		<div class="close-btn"></div>
	</div>
</div>

.sizing()
{
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	-ms-box-sizing: border-box;
  	-o-box-sizing: border-box;
	box-sizing: border-box;
}

#boxpop
{
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 100;
	margin: 0 auto;
	display: none;

	.centered
	{
		color: #000;
		width: 490px;
		background-color: #FFF;
		.rounded();
		overflow: auto;
		border: 3px @bleufonce solid;
		margin: 0 auto;
		margin-top: 100px;
		min-height: 50px;
		padding:5px;
		.sizing();

		.close-btn
		{
			background: @bleufonce;
			float: right;
			color: @blanc;
			text-align: center;
			padding: 5px;
			font-size: 18px;
			margin-top: 20px;
			cursor: pointer;
			border: 1px @noir solid;
			.sizing();
			&:before 
			{
				content: "OK";
			}
		}
	}
}

Code CSS utilisé par le biais de Less

$(function()
{
	$(".close-btn").click(function() 
	{
		PopBox(2);
	});	

});
function PopBox(arg)
{
	// 1 = Ouverture, 2 = Fermeture
	if(arg == "1")
	{
		$(".centered").empty();
		$("#boxpop").fadeIn(200);	
	} else if(arg == "2")
	{
		$("#boxpop").fadeOut(200);
		$(".centered").empty();
	} else {
		console.log("Action impossible, veuillez spécifié un élément.");
	}
}

Je voudrais avoir un début de piste pour savoir comment faire pour afficher le contenu correspondant, un peu comme la méthode Fancybox, sauf que je souhaite repartir entièrement de zéro.

J'aimerais si possible une base de ce type (exemple):

<a href="#" id="login1" data-lightbox="login2">Connexion</a>

<div id="login2" style="display:none;">
Le contenu à récupérer
</div>

A l'aide d'un code quelconque, je voudrais pouvoir récupérer la valeur de data-lightbox, et par conséquent, récupérer le résultat dans la page

En espérant avoir bien détailler mon problème
Merci,
Darkh62
Modifié par Darkh62 (21 Dec 2015 - 19:50)

Bonjour et bienvenue sur le forum,

Je n'ai pas tout compris au code du dessus, mais juste pour répondre à ta question pour récupérer ce qu'il y a dans le data-lightbox, en jQuery il suffit juste d'utiliser la fonction .data() :

$('a').click(function(e){
  e.preventDefault()
  var ref = $(this).data('lightbox')
  
  $('#'+ref).fadeIn(200)
})

Il faut intaller un autre plugin WP LIGHTBOX 2, e cocher l'option lightbox.

(spam supprimé)
Modifié par Felipe (06 Jan 2016 - 14:53)