2017

cu reduceri

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 fisier ZIP 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

16 comentarios:

  1. foarte fain și merge excelent!
    crezi că s-ar puta face ceva ca la înșiruirea imaginilor să apară și comentariul care însoțește de obicei fiecare imagine (cât de mic ), pentru imaginea car apare după fiecare clik ?

    RăspundețiȘtergere
  2. In acesta caz thamara el script nu permite o descriere a unei imagini, ai o solutie de adaugare a unui text direct pe imagine si dupa aceea sa fie adugata in galerie.

    RăspundețiȘtergere
  3. de ce în aceiași postare al doilea sau următoarele spacegallery nu mai funcționează? adică la publicare se vede o jumătate de imagine fixă în jumătatea din dreapta al spațiului de publicare articol, deși din modul de editare html, dacă treci pe modul scrieți, se văd toate imaginile înșirate una după alta, la fel ca la primul spacegallery ( cel care funcționează).
    trebuie modificat ceva în codurile pe care le-ai scris, ca să pot folosi mai multe spacegallery într-un articol ?

    RăspundețiȘtergere
  4. încă mai aștept un răspuns la întrbarea de mai sus. mai mult chiar, dacă în postare am și alte imagini cu alte efecte găsite aici la tine, spacegallery nu funcționează de loc :(

    RăspundețiȘtergere
  5. thamara scriptul de mai sus functioneaza perfect nu stiu de ce la tine nu merge! in legatura cu a doua inrebare, daca vrei sa extinzi numarul de imagini, adaugi la codul HTML <img src="URL imagine"/>

    RăspundețiȘtergere
  6. reiau :
    într-o postare doresc să folosesc mai multe ,,calupuri” de imagini spacegallery.
    primul merge ( și da, m-am prins cum adaug mai multe imagini la un singur ”calup”). problema intervine la al doilea, al treilea, șamd...
    exemplu:
    http://achenathen.blogspot.com/2011/07/metoda-de-legarea-tomatelor-florida_17.html#more

    am încercat și fără alte ”adaosuri”, gen video, text sau alt fel de imagini, altele decât scriptul spacegallery, dar la al doilea script cu calupuri de imagini spacegallery, se vede ceea ce vezi pe blogul meu : imaginile suprapuse pe jumătatea din dreapta a spațiului de publicare a postului.
    tu ai făcut probă cu două scripturi spacegallery pe aceiași pagină?

    RăspundețiȘtergere
  7. thamara scriptul pentru imagini spacegallery functioneaza corect doar folosind un singur calup de imagini cu un numar aproape nelimitat , dar incercand sa folosesti mai multe caluluri acestea intra in conflict intre ele, vezi si blogspot este limitat cu codul html (doar este gratis).

    RăspundețiȘtergere
  8. constantin, ce are din nou scriptul ? nu mai merge. văd că nici în demonstrativul tău nu mai funcționează !!
    îl poți reface, te rog ?

    la Mulți Ani și la multe realizări

    RăspundețiȘtergere
  9. thamara imi pare rau dar am verificat si functioneaza perfect acest script.
    Sarbatori Fericite si La Muli Ani! si tie.

    RăspundețiȘtergere
  10. Am intrat pe http://spacegalery.blogspot.com/2011/04/o-galerie-de-imagini-diferita.html#
    și încerc să click pe imagini pentru a vedea efectul, și nu se întâmplă nimic.
    voi încerca și cu alt browser decât chrome.

    RăspundețiȘtergere
  11. Eu folosesc Firefox si functioneaza perfect.

    RăspundețiȘtergere
  12. am încercat și pe mozzila, dar la mine tot nu merge. probabil se bate cap în cap cu alte chestii... :(
    totuși, de ce pe blogul tău de încercări, spacegallery nu merge decât cu mozzila ?

    RăspundețiȘtergere
  13. thamara pe blogul tau ai un script ce intra in conflict cu spacegallery, in Mozila functioneaza, in Crome de cand au schimbat versiunea nu mai functioneaza, probabil cand o vor inbunatati isi va relua activitatea. Sarbatori fericite!

    RăspundețiȘtergere
  14. Buna, as dori sa fac si eu o astfel de galerie foto si nu pot descarca acel document zip.....banuiesc ca am nevoie de el ca sa pot crea aceasta galerie dupa cum scrie aici...ma puteti ajuat???Va multumesc!

    RăspundețiȘtergere
  15. Da ai dreptate Ana Maria, fisierul ZIP nu mai este functional, voi incerca sa il schimb cu altul asemanator daca gasesc.

    RăspundețiȘtergere
  16. Multumesc, as fi tare bucuroasa sa poate functiona....Multumesc...

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc