jQuery plugin Space Gallery « Le Blog de Webinnov

jQuery plugin Space Gallery

administrateur

Le 2 juin 2014 à 20 h 23 min

<head></head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/spacegallery.js"></script>

Code HTML

<div id="contenu">
      








<div id="myGallery" class="spacegallery">
            	<img style="top: 1.27761px; margin-left: -71px; opacity: 0.0912579;" src="img/01.jpg" alt="Photo" width="136">
                <img style="top: 3.86007px; margin-left: -83px; opacity: 0.184462;" src="img/02.jpg" alt="Photo" width="161">
                <img style="top: 7.8076px; margin-left: -109px; opacity: 0.281966;" src="img/03.jpg" alt="Photo" width="212">
                <img style="top: 13.2287px; margin-left: -130px; opacity: 0.387221;" src="img/04.jpg" alt="Photo" width="254">
                <img style="top: 20.3196px; margin-left: -154px; opacity: 0.506497;" src="img/05.jpg" alt="Photo" width="302">
             	<img style="top: 29.497px; margin-left: -184px; opacity: 0.655525;" src="img/06.jpg" alt="Photo" width="362">
             	<img style="top: 43.497px; margin-left: -248px; opacity: 1;" src="img/07.jpg" alt="Photo" width="490">
				<a class="" href="#"></a>
</div>








</div>

</div>

Code css :

#myGallery {
	width: 100%;
	height: 360px;
}

#myGallery img {
	border: 2px solid #52697E;
}
a.loading {
	background-color: #fff;
	background-image: url(../js/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center;
}

.spacegallery {
	position: relative;
	overflow: hidden;
}
.spacegallery img {
	position: absolute;
	left: 50%;
}
.spacegallery a {
	position: absolute;
	z-index: 1000;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../js/blank.gif);
}

#myGallery {

width: 100%;

height: 360px;

}

#myGallery img {

border: 2px solid #52697E;

}

a.loading {

background-color: #fff;

background-image: url(../js/ajax-loader.gif);

background-repeat: no-repeat;

background-position: center;

}

.spacegallery {

position: relative;

overflow: hidden;

}

.spacegallery img {

position: absolute;

left: 50%;

}

.spacegallery a {

position: absolute;

z-index: 1000;

display: block;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: url(../js/blank.gif);

}

David LAURENT

Commentaires fermés classé dans : Javascript,Tutoriel

Aucun commentaire

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.