2019. február 22., péntek

Gyorskeresés

Blog.hu -ra normális képnézegető / megjelenítő beillesztése

Írta: | Kulcsszavak: blog . képnézegető . imageviewer . jquery . képmegjelenítő

[ ÚJ BEJEGYZÉS ]

Konkurrencia a PH-nak, de talán nem gáz - és teljesen problémamegoldó jelleggel akarnám megosztani, hogy hogyan sikerült a blog.hu -ra összekalapálni egy értelmesebb, jQuery alapú képmegjelenítőt, hátha másnak is segít. Főleg, ha ugyanúgy fogalma sincs a jQuery-ről, mint nekem :D

Elég sokáig kellett keresgélni olyan jQuery alapú megjelenítő után, ami az alábbi dolgokat tudja :
- képre kattintva teljes képernyőre teszi
- ekkor egérrel lehet azt húzgálni, görgővel zoomolni
- működik mindenféle böngészőkkel
- egyáltalán, a blog.hu szerencsétlen sablonjaiba beletehető (a beépített megjelenítőjük néha kevés)

A befutó az Imageviewer lett (bár a sirv.com-ra feltöltött panorámákhoz kapott nézegető nagyon jó, és sokkal egyszerűbb, de az az oldal fizetős).
Az Imageviewerhez ell egy CSS, az Imageviewer jQuery, és maga a jQuery, ezt a Google-től linkeltem, mert lusta vagyok, meg amúgy sem nagy látogatottságú az az izé.

Az admin felületről a Beállítások-Sablonok-...használt sablon...-Filekezelőben töltsük fel az imageviewer.css, és imageviewer.js file-okat valahova. A feltöltött file-on jobb katt a "Kép URL-jének másolása" -ra, és megkapjuk a pontos URL-t, erre szükség lesz.

Váltsunk a CSS-re, és az elején importáljuk a CSS-t : @import url(...az előbb kapott URL a CSS file-ra...);

Majd mentés, vissza a bejegyzésekhez, és kezdjünk egy új "Klasszikus" típusú bejegyzést, aminek a HTML szerkesztőjében az alábbiakra lesz szükség :

<script src="http://...útvonal.../imageviewer.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> (Lehet újabbat is persze)

<div id="image-gallery-1" class="cf"><img src="http://útvonal_a_kisfelbontású_képre.jpg" data-high-res-src="http://nagyfélbontásúkép.jpg" alt="MÉNEMMŰKÖDSZ" class="gallery-items" /></div>
<p>
<script type="text/javascript">// <![CDATA[
$(function () {
var viewer = ImageViewer();
$('.gallery-items').click(function () {
var imgSrc = this.src,
highResolutionImage = $(this).data('high-res-img');

viewer.show(imgSrc, highResolutionImage);
});
});
// ]]></script>
</p>

Nem szép, de működik; ugyanakkor nem is egy űrtechnika : behúzza a megjelenítő scriptet, a div-ben van egy kisfelbontású kép (hogy ne több MB-ot rántson le az oldal alapból), amihez meg van adva a nagy felbontású elérési útja is, a képre kattintás lekezelésekor pedig a megjelenítő script kezd működni.

Amúgy maga az Imageviewer jó kis cucc, háromféle módja van (én csak az Image Mode-ot használom), így egy nézegetővel többféle feladat is megoldható. Mondjuk nálam a letöltött csomagban levő demóban is csak az Image Mode működött, de nem is nagyon szórakoztam a többivel. Meg hát, saját oldalon is felhasználható, egyébként ilyen jelleggel még egyszerűbb.

Copyright © 2000-2019 PROHARDVER Informatikai Kft.