Galeria JQuery - usera "stacjonarny" ???

grafik

Avatar: grafik

2013-08-02 04:42

"serwis" pisał na forum 2012-02-18... w wątku... http://opensolution.org/forum/galeria-jqury-w-quickcms,8685.html

Witam,

Chcę zainstalować galerię jQuery na stronie opartej o Quick.CMS - tak, żeby można było przez Panel dodawać do niej zdjęcia. Galeria np. taka jak tu:

http://www.rafalglebowski.pl/przygotowania.php »

Czy jest to możliwe?
A jeśli tak, z góry dziękuję za wszelkie podpowiedzi, jak można to zrobić...
» free Quick.Cms v4.x

Odezwał się "stacjonarny"

Witaj serwis!
To bÄ™dzie bardzo prosty przykÅ‚ad na integracjÄ™ galerii jQuery. Zaadoptujemy prosty skrypt z http://websta.pl/tutoriale/jquery-galeria-z-podmiana-obrazkow » , bedÄ™ sie do niego odwoÅ‚ywaÅ‚. Ja go jeszcze uproszczÄ™ i usunÄ™ kolorowe bordery i tak roboty jest sporo.
Najpierw przeczytaj ten topic: http://opensolution.org/Quick.Cms/forum/image-gallery,1972.hml » .
Powinien być utworzony nowy szablon pages_gallery.tpl zgodnie ze wskazówkami Opensolution ja sobie ułatwię zadanie i wprowadzę zmiany bezpośrednio w pages_default.tpl i style.css.
Najpierw w templates/container.tpl w sekcji meta ddodajemy bibliotekÄ™ jQuery oraz plik gallery.js:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> &#187;;
<script type="text/javascript" src="plugins/gallery/gallery.js"></script>

W folderze plugins tworzymy folder gallery a w nim osadzamy plik gallery.js:

$(function() {

$(".imagesList a").click(function(){

var sciezka = $(this).attr("href");
var tytul = $(this).attr("title");

$(".duzy").attr({ src: sciezka, alt: tytul });

return false;
});

});

Jak widac zrezygnowałem z class miniatury. Miniatury o szerokości 150 px, rozmieszczę w czterech kolumnach za pomocą .imagesList. W tym celu w pliku templates/pages_default.tpl, w sekcji IMAGES:

<!-- BEGIN IMAGES_DEFAULT -->
<div id="kontener">
<div class="galeria">
<img class="duzy" src="$config[dir_files]$aData[sFileName]" alt="$aData[sDescription]" />
</div>
<ul class="imagesList" id="imagesList$aData[iType]"><!-- START LIST -->
<li>
<a href="$config[dir_files]$aData[sFileName]" class="duzy" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a><!-- IF:START DESCRIPTION -->
<div>$aData[sDescription]</div><!-- IF:END DESCRIPTION -->
</li><!-- END LIST -->
</ul>
</div>
<!-- END IMAGES_DEFAULT -->

Znalazły się tu elementy html ze skryptu galerii. Zwróć uwagę na class="duzy" zamiast class="mlbox[pages]".

Teraz pora na style.css, do części IMAGES STYLES dodajemy:

#imagesList3{float:left;margin:10px 0 0 0;width:100%;}
#imagesList3 li{width:25%; float:left;height:130px;}

#kontener{margin: 70px auto 40px auto;width: 640px;}
.galeria{margin: 10px;}

Jeszcze należy wykonać pozostałe czynności jak we wspomnianym już topicu. Dodam tylko, że w pliku core/files.php wstawiamy liczbę 5.
Teraz dodajesz w panelu admina fotki, możesz je ustawiać nawet w kilku rzędach. Warto wprowadzić uporządkowane nazwy obrazów np. liczba porządkowa na czele.
Mam tu jeszcze nierozwiązany problem-jako obraz domyślny jest obraz ostatni w szeregu.
Powyższy opis służy tylko naprowadzeniu na właściwy trop. Należy stworzyć nowy szablon w oparciu o wskazówki w dokumentacji Opensolution no i oczywiście pobawić się stylami.
Powinno sie sprawdzić w bardziej rozbudowanych galeriach. Jak to działa prezentuję na http://quickcms.comze.com &#187;. Galeria jest na podstronie Company, na pozostałych podstronach zamęt jaki wprowadza brak osobnego szablonu. Niech mi Opensolution wybaczy użycie quickcms w nazwie strony, słuzy ona tylko eksperymentalnemu sprawdzaniu topiców z tego forum.

*************************

Strona, na której znajdywały się instrukcje do galerii już nie istnieje [uwaga - strona zawiera sceny erotyczne]: http://freetemplatescms.com/?galeriaad,18

Dwa dni wysłałam maila do "stacjonarnego" - udało się odnaleźć adres w skrzynce - kiedyś bardzo mi pomógł przy galerii. Nie odpisał, więc nie wiem czy żyje, czy po prostu "olał temat". Chciałabym stworzyć na stronie galerię "ad-gallery", ale bez instrukcji stacjonarnego nic nie zrobię. Jeśli ktoś dysponuje instrukcją - lub może ma chęć takową stworzyć, to będę bardzo zobowiązana i sądzę że nie tylko ja.

GALERIA AD-GALLERY - taka jak tutaj: http://coffeescripter.com/code/ad-gallery

» Quick.Cms v3.x

selekcjoner

Avatar: selekcjoner

2013-08-02 16:48

Dla free Quick.Cms v3.x

Pobieramy galeriÄ™:
http://adgallery.codeplex.com/downloads/get/377362

Po rozpakowaniu otwieramy AD Gallery 1.2.7 i zmieniamy nazwÄ™ z "lib" na "galeria".

Katalog "galeria" wrzucamy do katalogu w skrypcie o nazwie "plugins"

W sekcji HEAD w pliku: templates/container.tpl wstawiamy pod:
<meta http-equiv="Content-Style-Type" content="text/css" />


<link rel="stylesheet" type="text/css" href="plugins/galeria/jquery.ad-gallery.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="plugins/galeria/jquery.ad-gallery.js"></script>
  <script type="text/javascript">
  $(function() {
    var galleries = $('.ad-gallery').adGallery();    
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
      }
    );
    $('#toggle-slideshow').click(
      function() {
        galleries[0].slideshow.toggle();
        return false;
      }
    );
    $('#toggle-description').click(
      function() {
        if(!galleries[0].settings.description_wrapper) {
          galleries[0].settings.description_wrapper = $('#descriptions');
        } else {
          galleries[0].settings.description_wrapper = false;
        }
        return false;
      }
    );
  });
  </script>


oraz usuwamy:


<script type="text/javascript" src="$config[dir_core]prototype.lite.js"></script>
<script type="text/javascript" src="$config[dir_core]moo.fx.js"></script>
<script type="text/javascript" src="$config[dir_core]litebox-1.0.js"></script>



Natępnie modyfikujemy plik: templates/pages_default.tpl:
Znajdujemy:


<!-- BEGIN IMAGES_LIST_DEFAULT --><li><a href="$config[dir_files]$aData[sFileName]" rel="lightbox-page" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a>$aData[sDescriptionContent]</li><!-- END IMAGES_LIST_DEFAULT -->
<!-- BEGIN IMAGES_DESCRIPTION_DEFAULT --><div>$aData[sDescription]</div><!-- END IMAGES_DESCRIPTION_DEFAULT -->
<!-- BEGIN IMAGES_HEAD_DEFAULT --><ul class="imagesList" id="imagesList$aData[iType]"><!-- END IMAGES_HEAD_DEFAULT -->
<!-- BEGIN IMAGES_FOOT_DEFAULT --></ul><!-- END IMAGES_FOOT_DEFAULT -->


i zamieniamy na:


<!-- BEGIN IMAGES_LIST_DEFAULT --><li><a href="$config[dir_files]$aData[sFileName]"  title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a></li><!-- END IMAGES_LIST_DEFAULT -->
<!-- BEGIN IMAGES_DESCRIPTION_DEFAULT --><div>$aData[sDescription]</div><!-- END IMAGES_DESCRIPTION_DEFAULT -->
<!-- BEGIN IMAGES_HEAD_DEFAULT --><div id="gallery" class="ad-gallery"><div class="ad-image-wrapper"></div><div class="ad-controls"></div><div class="ad-nav"><div class="ad-thumbs"><ul class="ad-thumb-list"><!-- END IMAGES_HEAD_DEFAULT -->
<!-- BEGIN IMAGES_FOOT_DEFAULT --></ul></div></div></div><!-- END IMAGES_FOOT_DEFAULT -->





Oraz doklejamy style do pliku templates/default.css:


pre{
  font-family: "Lucida Console", "Courier New", Verdana;
  border: 1px solid #CCC;
  background: #f2f2f2;
  padding: 10px;
}
code{
  font-family: "Lucida Console", "Courier New", Verdana;
  margin: 0;
  padding: 0;
}
#gallery {
  padding: 30px;
  background: #e1eef5;
}
#descriptions {
  position: relative;
  height: 50px;
  background: #EEE;
  margin-top: 10px;
  width: 640px;
  padding: 10px;
  overflow: hidden;
}
#descriptions .ad-image-description {
  position: absolute;
}
#descriptions .ad-image-description .ad-description-title {
  display: block;
}



Oczywiście pozostaje zabawa w stylach, ale to już sama przyjemność :)

Testowane na czystej wersji free Quick.Cms v3.x

simlution.org

grafik

Avatar: grafik

2013-08-04 18:21

Galeria się pokazała, ale wygląda jakby nie widziała js... są miniaturki, jest pole... tylko zdjęcia otwierają się w nowym oknie.

selekcjoner

Avatar: selekcjoner

2013-08-05 08:14

Tak jak pisałem, galeria była testowana na czystej wersji. U Ciebie prawdopodobnie jest konflikt jquery. Podaj adres strony na której występuje problem.

simlution.org

Do góry
o nas | kontakt