Concrete5 - dodajmy Lightbox do każego obrazka na stronie

Tworząc, a raczej przepisując mój blog z WordPressa na Cocnrete5 zgodziłem się na pewne niedogodności. Jedna nieodparta pokusa wykorzystania bloków w C5, możliwości programistyczne oraz customizowania systemu dały górą :)

Jest jednak jedna rzecz, której się obawiałem - obrazki we wpisach, a raczej ich rozmiar. I nie mam tutaj na myśli ich wagę a szerokość.

Większość screenów jakie robię mają szerokość ponad 1000px przez co nie mieszczą się w szablonie.

W związku z tym chciałem wykorzystać popularną bibliotekę do jQuery o nazwie Lightbox.

Wszystko byłoby fajnie, gdyby nie fakt, że zanim o tym pomyślałem przepisałem prawie wszystkei wpisy z WP na C5.

Musiałem więc uruchomić kilka szarych komórek, trochę pobawić się jQuery i dzięki poniżemu fragmentowi kodu wszystkie obrazki należące do wpisu działają na Lightbox'ie.

  1. <script type="text/javascript">
  2. $('document').ready(function(){
  3. var n = Math.floor((Math.random()*10)+1);
  4. $('#colLeft img').each(function(){
  5. var obj = $(this);
  6. var lightbox = '<a href="';
  7. var src = obj.attr('src');
  8. var style = obj.attr('style');
  9. lightbox += src;
  10. lightbox += '" data-lightbox="image'+n+'">';
  11. lightbox += '<img style="'+style+'" src="'+src+'"/>';
  12. lightbox += '</a>';
  13. obj.replaceWith(lightbox);
  14. });
  15. });
  16. </script>

Dodatkowo musiałem jeszcze zmniejszyć rozmiar obrazków we wpisie za pomocą CSS'a:

  1. #content #colLeft img {
  2. max-width: 600px;
  3. height: auto;
  4. border: none;
  5. }

W ten oto sposób otrzymałem ten sam efekt co na WP.

Jedyny minus jaki znalazłem, to dłuzsze ładowanie storny, ponieważ od razy są wczytywane duże obrazki, a zmniejszane za pomocą CSSa.