O galerie de imagini diferita - Spacegallery -

Exista mai multe tipuri de galerii de imagini care se gasesc pe Internet, dar rar vezi unul care afişează imaginile într-o manieră atat de diferita cum este aceasta.Sunt sigur că vă veţi bucura de acest tip de efect pentru a vizualiza imagini.

Este vorba de Spacegallery si este o galerie de imagini realizata cu jQuery în care imaginile apar unul după altul făcând clic pe ele.

Poti vedea un exemplu aici.

Pentru a folosi aceasta galeria prima data trebuie sa descarci urmatorul fisier ZIP, il descomprimi si gazduiesti cele 3 script intr-un servitor online de exemplu in DropBux Dupa aceia adaugi inainte de </head> urmatorul cod JavaScript:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL fisier eye.js' type='text/javascript'/>
<script src='URL fisier utils.js' type='text/javascript'/>
<script src='URL fisier spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

inlocuieste ce apare in culoare rosie cu url care il ofera serverul unde ai gazduit respectivele fisiere script - ATENTIE! respecta exact ordinea fiecarui script cum apare mai sus, altfel nu o sa functioneze.

In continuare inainte de ]]></b:skin> adaugi efectul urmator CSS:

#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEYb6SdaQdau-yAJYxyq4U-kNlzXzkUqE6Wi8kC_qoLOtsOeqIVmi9eBTNSphrXO1GmqhcAXhpmuR4mzgqPaowjB6jSpgRAtpOFc89hkQ2Ejwm3D8ZCRRiAC8BK2_DffJAT5V_1EzxzYc/) no-repeat 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%;
}

Salvezi modificarile, si acum intr-o postare noua adaugi codul HTML urmator:

<div class="spacegallery" id="myGallery">
<img src="URL imagine"/>

<img src="URL imagine"/>

<img src="URL imagine"/>

<img src="URL imagine"/>

<img src="URL imagine"/>

</div>

schimba URL imagine cu url-ul imagini care doresti sa apara in postare. SUCCES