|
   |
| Comunitatea uCoz Configurări ale sistemului uCoz Albumele Foto Modificarea afişării Lightbox-ului |
| Modificarea afişării Lightbox-ului |
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, 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, 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) '; Unde era: Cod } }, afterShow: function() { // Render tweet button Cod } } }, afterShow: function() { // Render tweet button Be the change you want to see in the world. M Gandhi.
|
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) Adăugat (30/04/2013, 5:37 PM) |
ai putea sa-ti faci o pagina de Facebook si sa-ti pui un plugin de comenturi poate...
|
| |||
| |||