• Pagina 1 din 1
  • 1
Comunitatea uCoz » Configurări ale sistemului uCoz » Albumele Foto » Modificarea afişării Lightbox-ului
Modificarea afişării Lightbox-ului
Felicia
Postări: 1326
Reputație: 55
Mesaj # 1 | 11:17 PM
LightBox este un script de afişare a imaginilor pe pagina curentă într-o fereastră Ajax, fără a reîncărca pagina. Lightbox-ul standard pe un website uCoz arată în felul următor:



Puteţi modifica modul de afişare a LightBox-ului standard uCoz, utilizând ghidul de mai jos, dacă aveţi suficiente cunoştinţe JavaScript şi CSS. Dacă nu sunteţi încrezători în abilităţile dvs, noi nu recomandăm să faceţi aceste modificări şi vă sugerăm să folosiţi sistemul de setări standard ca cea mai potrivită soluţie.


Pentru a modifica parametrii standard LightBox, adăugaţi următorul cod în partea de jos a tuturor paginilor website-ului:

Panoul de Control → Personalizare Design → Secţiuni globale → Partea de jos a website-ului


Code
<script type="text/javascript">    
$(document).ready(function(){    
$('.ulightbox').fancybox({padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons : {}}});    
});    

function _bldCont1(id, indx) {    
idarray = 'allEntImgs' + id;    
imgar = [];    
for (var i=0;i<eval(idarray).length;i++) {    
imgar[i] = eval(idarray)[i][0];    
}    
$.fancybox(imgar,{index: indx, padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons: {}}});    
}    
</script>  


Puteţi modifica următorii parametrii standard:

padding — lăţimea cadrului alb din jurul imaginii;
preload — numărul de imagini pentru preîncărcare;
closeEffect — efectul de închiderea ferestrei (elastic, fad, nici unul);
nextEffect, prevEffect — efectul de trecere de la anterioară/următoarea imaginea (elastic, fad, nici unul);
opacity — opacitatea umbrei, poate fi setată de la 0 (transparenţă completă) to 1 (netransparent);
speedIn, speedOut — timpul de apariţie/dispariţie a umbrei în milisecunde.




Pentru a modifica umbrirea fundalului, adăugaţi următoarea linie în CSS:

Panoul de Control → Personalizare Design → Stilul foii (CSS)


Code
#fancybox-overlay {background: #ff0000 !important;}


#ff0000 – culoarea de fundal. Poate fi înlocuită cu o imagine, utilizând următorul parametru url(/fon.jpg).

Informaţii mai detaliate puteţi găsi aici

Good things come to those who wait!
kpk1l
Postări: 197
Reputație: 13
Mesaj # 2 | 8:39 PM
se poate face ceva gen facebook? cu comentarii si buton like
am vazut aci despre like: http://jsfiddle.net/G5TC3/
dar nu stiu ce trebuie adaugat

Material modificat de kpk1l - Sâmbătă, 27/04/2013, 8:39 PM
Raver
Postări: 1227
Reputație: 70
Mesaj # 3 | 4:52 PM
kpk1l, da. Trebuie să mergi în Panoul de Control -> Design -> Adiministrarea șabloanelor (CSS) -> Secțiuni globale -> Partea superioară a site-ului.

Aici, pui următorul cod (oriunde în secțiune):
Cod
<script>$(".fancybox")
  .attr('rel', 'gallery')
  .fancybox({
  beforeShow: function () {
  if (this.title) {
  // New line
  this.title += '
';
   
  // Add tweet button
  this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';
   
  // Add FaceBook like button
  this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
  }
  },
  afterShow: function() {
  // Render tweet button
  twttr.widgets.load();
  },
  helpers : {
  title : {
  type: 'inside'
  }
  }  
  });
</script>


Apoi, în Panoul de Control -> Administrare Design -> Albume Foto -> Personalizare design modul -> Aspect intrari, înlocuiești:

Cod
<a href="$PHOTO_LIGHTBOX_URL$" title="Views: $REVIEWS$ | Dimensions: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">$PHOTO$</a>


cu

Cod
<a title="$PHOTO_NAME$" class="fancybox" href="$FULL_PHOTO_DIRECT_URL$">$PHOTO$</a>


Dă-ne te rugăm de știre dacă a funcționat. Merci

Be the change you want to see in the world. M Gandhi.
kpk1l
Postări: 197
Reputație: 13
Mesaj # 4 | 6:12 PM
dar asa:
Cod
href="$FULL_PHOTO_DIRECT_URL$"

se deschide poza originala.

eu vreau ca in acel lightbox sa pot pune like si comentarii (ca la facebook)

Raver
Postări: 1227
Reputație: 70
Mesaj # 5 | 6:42 PM
kpk1l, momentan este posibil doar să pui "Like-ul" de la Facebook, fără comentarii. Pentru aceasta trebuie să faci următoarele:

La codul:
Cod
// Add tweet button
   this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';


pune
Cod
// FB like
   this.title += 'his script (FB LIKE) ';
înainte sau după.

Unde era:
Cod
}
   },
   afterShow: function() {
   // Render tweet button
trebuie să înlocuiești cu:

Cod
}
}
   },
   afterShow: function() {
   // Render tweet button

Be the change you want to see in the world. M Gandhi.
kpk1l
Postări: 197
Reputație: 13
Mesaj # 6 | 7:37 PM
Citat (Raver)
pune
// FB like
   this.title += 'his script (FB LIKE) ';

înainte sau după.


pe like e mai sus unde ai pus prima data:
Citat (Raver)
// Add FaceBook like button
  this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';


nu inteleg de ce mai trebuie inchisa o acolada } daca nu e deschisa?
Citat (Raver)
Unde era:
}
   },
   afterShow: function() {
   // Render tweet button
trebuie să înlocuiești cu:

}
}
   },
   afterShow: function() {
   // Render tweet button


eu am folosit codul pe de site: http://jsfiddle.net/G5TC3/
doar ca in loc de :
Cod
<a title="2nd title" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

am pus:
Cod
<a title="$PHOTO_NAME$" class="fancybox" href="$PHOTO_LIGHTBOX_URL$">$PHOTO$</a>


doar ca diferenta dintre ce apare la mine si cum ar trebui sa apara ca la ei este ca nu am butonul de tweet ci scrie pur si simplu TWEET

Adăugat (30/04/2013, 5:36 PM)
---------------------------------------------
dintre resursele externe date de ei... doar widget.js nu e pe server nu?

Adăugat (30/04/2013, 5:37 PM)
---------------------------------------------
da. biggrin
widgets.js lipsea

pacat ca nu se poate si comentarii. ms pt ajutor! biggrin


admin9894
Postări: 125
Reputație: 0
Mesaj # 7 | 8:14 PM
ai putea sa-ti faci o pagina de Facebook si sa-ti pui un plugin de comenturi poate...
kpk1l
Postări: 197
Reputație: 13
Mesaj # 8 | 8:25 PM
admin9894, ??!?!
aci vorbim de ucoz. nu pagina facebook!

Comunitatea uCoz » Configurări ale sistemului uCoz » Albumele Foto » Modificarea afişării Lightbox-ului
  • Pagina 1 din 1
  • 1
Căutare: