FancyBox
Sziasztok!
Remélem jó helyre írom ezt a kérdést...
Képgalériát szerettem volna készíteni, így hosszas keresgélést után rátaláltam a FancyBox2-re. Sikerült is beépíteni az oldalamba, és tökéletesen működik a képnézegető. Nem tudom mikre képes még, de én azt a funkcióját használtam, hogy a képre kattintva behozza azt nagyba, és a képek nyilacskákkal léptethetők a galérián belül.
Teszteltem InternetExplorer11-en, FireFox-on, Chrome-on, Operán, minden rendben volt.
Aztán megpróbáltam PDF-eket is megjeleníteni vele. Korábban sima object-be téve oldottam meg ezt, de hát FancyBox-szal mégis csak sokkal látványosabb... :) és nincs dupla gördítő sáv függőlegesen (egy az oldalnak, egy a pdf-nek), aminél attól tartok, hogy sokaknak elég zavaró lenne.
FF-on, Chrome-on, Operán tökéletesen működik, viszont IE-n nem.
IE-n elkezdi betölteni, de ezen a ponton megakad és nem lép tovább.
Ha használta már valaki a FancyBox2-t, tapasztal ilyen hibát IE-nél? Hogyan lehet ezt orvosolni?
Válaszotok előre is köszönöm!
Kódsor a HEAD-ben:PDF hivatkozás:A javascript fájlokba nem nyúltam bele, mind full original.
Itt elérhető:
■ Remélem jó helyre írom ezt a kérdést...
Képgalériát szerettem volna készíteni, így hosszas keresgélést után rátaláltam a FancyBox2-re. Sikerült is beépíteni az oldalamba, és tökéletesen működik a képnézegető. Nem tudom mikre képes még, de én azt a funkcióját használtam, hogy a képre kattintva behozza azt nagyba, és a képek nyilacskákkal léptethetők a galérián belül.
Teszteltem InternetExplorer11-en, FireFox-on, Chrome-on, Operán, minden rendben volt.
Aztán megpróbáltam PDF-eket is megjeleníteni vele. Korábban sima object-be téve oldottam meg ezt, de hát FancyBox-szal mégis csak sokkal látványosabb... :) és nincs dupla gördítő sáv függőlegesen (egy az oldalnak, egy a pdf-nek), aminél attól tartok, hogy sokaknak elég zavaró lenne.
FF-on, Chrome-on, Operán tökéletesen működik, viszont IE-n nem.
IE-n elkezdi betölteni, de ezen a ponton megakad és nem lép tovább.
Ha használta már valaki a FancyBox2-t, tapasztal ilyen hibát IE-nél? Hogyan lehet ezt orvosolni?
Válaszotok előre is köszönöm!
Kódsor a HEAD-ben:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<a class="fancybox fancybox.iframe" href="mappanev/fajlnev.pdf">Link szövege</a>
Itt elérhető:
Közvetlenül a címét megadva
Arra gondolsz, hogy ne legyen
Ha nincs almappában, akkor sem működik.
Köszönöm amúgy, hogy átraktad jó helyre a kérdésem. :)
vagy arra, hogy nem
Erre, tehát hogy egyszerűen írd be IE-ben a PDF címét az URL-sávba. Lehet, hogy hiányzik egy bővítmény vagy ilyesmi.
Ha tudsz adni egy címet az oldalhoz, akkor könnyebben tudunk segíteni.
Még nem elérhető
Kizárt, hogy hiányzó bővítmény baja lenne.
Ha így jelenítem meg, vagyis, hogy beágyazom a megfelelő helyre, akkor betölti az IE is a pdf fájlt:
Meg látszik is, hogy a javascript akad meg a betöltésnél, mert a töltést mutató animáció még elindul, és csak forog a végtelenségig.
A fejlesztői eszközökben a
A DOM-nál és a Hibakeresőben
CTRL+U-val sem panaszkodik semmire.
Konzolon meglepően szűkszavú. :D
Hálózatnál pedig látszódik, de itt egy kép róla:
Azokat a részeket, amik reklámnak minősülhetnek, kihúztam, de szerintem így is érthető :)
Meg tudod keresni a DOM-ban
dom
Akkor hogyan jeleníti meg a
Fent már leírtam.
Objectben jelenítettem meg kezdetben, de ahhoz nem kell FancyBox.
A FancyBox-szal szeretném azt a megoldást lecserélni.
FancyBox esetében így jelenítem meg:
Rákattintasz a link szövegére és akkor aktiválódik a javascript, ami behozza egy kis áttűnéses animációval a képernyő közepébe egy lebegő ablakba a pdf fájlt, miközben magát az oldalt a háttérben elsötétíti. Az aktuális felbontáshoz arányosan igazítja, és ilyenkor csak a pdf-et tudod görgetni, a weboldalt nem.
Fent azt is írtam, hogy ez Chrome-ban, FireFoxban és Operában prímán működik, csak IE-ben nem, és csak a PDF megjelenítés résszel van baja, a képmegjelenítés simán megy.
Magába a javascript-be tudomásom szerint nem kell belenyúlni, az úgy jó, ahogy van.
Ezért írtam ki a kérdésben a head-részben szereplő script-eket, mert arra gondoltam, hogy talán oda kell valami plusz kifejezetten az IE-hez, vagy abban van valami olyan kódrész, amit az IE másképp, vagy sehogy sem értelmez.
Külföldi fórumokon is ezt a részt módosítgatják, ki is próbálgattam párat, de nekem nem segít, nyilván én csinálok valamit rosszul, mert erre biztos létezik megoldás.
Akinek nem teljesen világos, hogy mi is az a FancyBox:
A FancyBox egy HTML, kép és egyéb multi-média megjelenítő javascript plugin, amit még régen megírt pár okos emberke és ez szabadon felhasználható. Amióta ismerem, azóta tűnt csak fel, hogy milyen sok oldal használja ezt, tehát egyáltalán ne egy gagyi hobbiprojektre gondoljatok. :)
Ha esetleg a Lightbox mond vkinek vmit - nos ez annak az alternatívája.
Én ezt mind értem, sőt,
Azt leírtad, hogy milyen HTML kóddal inicializálod az oldalt, de azt fontos értened, hogy ez a HTML a memóriában az interakció hatására változik – amikor megjelenik a képnézegető, akkor a hozzá tartozó HTML dinamikusan hozzáadódik az oldalhoz.
Ezt a dinamikus HTML-t látod a DOM fülön, szemben a statikus, kezdeti HTML-lel, amit akkor látsz, amikor a forrást megjeleníted.
Tehát azt kellene megnézni, hogy amikor megnyitod a PDF-et, akkor a DOM-ban milyen elemek tartoznak hozzá IE-ben és a többi böngészőben (ki tudod másolni forráskódként), van-e eltérés, le tudjuk-e szűkíteni a problémát a Fancyboxtól független kódra.
(Ez az egész folyamat pedig jó példa lesz arra, hogyan tudod a jövőben magad is megtalálni a hibákat.)
Oké, bocsi. :) Azt hittem nem
A kérdés feltételkor még abban bíztam, hátha egy ismert hibába futottam bele, ami már másoknak is előjött, de akkor ez nem ennyire egyszerű.
A DOM-ban mindössze ennyi látszik (IE):
Itt sajnos nem igazán tudom, hogy mit keressek.
Összehasonlítottam FF-al és nem látok különbséget. :S
Próbáld meg légyszíves ezt
ó, de jó, köszönöm ezt a
FF-ban tökéletes, IE alatt viszont ez sem működik, de kicsit más a hibajelenség.
Nem akad el a töltésnél, hanem itt már bejön a lebegő ablakocska, viszont üres, nincs benne a pdf tartalom.
Amúgy ez a "preload: false" mi benne?
Jól van, akkor ennyit próbálj
A hivatalos példák közt szerepel így, a dokumentációban nincs hozzá magyarázat, de feltételezem, hogy ezt megadva még a kattintás előtt betölti a tartalmat, hogy ne kelljen rá várni.
Működik
Azzal pedig az IE-nek sem volt baja.
Ebben az az érdekes, hogy a
Csinálj minden PDF-nek egy önálló oldalt, ahol beágyazod a PDF-et (objecttel vagy iframe-mel), és arra az oldalra linkelj a PDF helyett.
WOW!
Köszönöm szépen a segítséget!
Ez a megoldás eszembe se jutott volna.
Még egy utolsó kérdésem lenne, ha nem gond, de ez már nem teljesen ide tartozik:
Bár az objectben meg kell szabni a magasságot és a szélességet, de mivel neked hála már meg tudom jeleníteni FancyBox-szal, nincs megkötve a kezem, hogy a weboldal megjelenítő felületéhez igazodjon a pdf tartalom.
Van arra valami mód, hogy az objectben szereplő kötött méret helyett (pl.: "width="700px" height="600px") méretezze magát a rendelkezésre álló helyhez?
Mert nem akarok se a nagyon kicsi, sem a nagyon nagy felbontásban böngészőkkel kiszúrni, hogy megpróbálok egy méretet kitalálni. :)
Vagy ha ez már nem működik, és tegyük fel, hogy csak számítógépre próbálok optimalizálni, (nem tabletre, telefonra stb) akkor szerinted mi az a minimum felbontás, amit figyelembe kell vennem a méretezésnél? Amit manapság még használhatnak. 1024x768?
Az objectnek meg tudsz adni
html
-lel bezárólag mind 100%-nak kell lennie.Ezzel a böngésző PDF-olvasója az egész hivatkozott oldalt kitölti, azon belül a PDF mérete a PDF-olvasótól függ. Ezek után a hivatkozó oldalon a Fancybox méretezi a dobozt, láthatóan úgy, hogy kitöltse a rendelkezésre álló helyet.
Ez az egész szerintem nem olyan lesz, amilyet te szerettél volna, írok egy másik hozzászólást, hogyan kellene csinálni.
Külföldi fórumokon is
Persze, hogy nem
Egyébként a PDF tartalmak esetén ezt úgy szokták megoldani, hogy csinálnak belőle egy HTML változatot is és azt teszik elérhetővé. Feltéve, hogyha nem védett tartalomról van szó. Akkor valamilyen Flash alapú megoldást szoktak használni. Ha jól emlékszem az SWFTools csomagban ami talán ingyenes, van valamilyen PDF2SWF átalakító.
class-ok
A galéria így néz ki:
A flash alapú megoldásba inkább nem másznék bele.
A Fancybox nekem nagyon tetszik, szeretném, ha ezzel működne. :)
MS Edge-en is szokás már tesztelni az új oldalakat, vagy az sem jobb az IE-nél?
Ha jól értem, az eredeti
Ezt natív webes technológiákkal nem fogod tudni megoldani, mert se implicit se excplicit nem tudod a beágyazó elemed méretét a PDF-hez igazítani. Még az sem járható út, hogy kiszámolod a méretét és kézzel megadod, mert a különböző böngészők különböző méretű eszköztárakat és margókat tesznek az olvasójukban a dokumentum köré. És ha valahogy meg is oldanád a beágyazó elem méretezését, az olvasón belül a PDF méretére semmilyen ráhatásod nincs. A Firefox például lehetővé teszi a méretezést az eszköztárán és tudja automatikusan méretezni a szélesség függvényében, míg a Chrome-nak nincs eszköztára és fix a méret.
Ameddig PDF-et használsz, addig nem lesz meg a kellő kontrollod a megfelelő méretezéshez. Úgyhogy legjobb megoldás szerintem az, ha SVG-be konvertálsz. Az SVG is vektoros formátum, tehát ugyanúgy méretezhető, mint a PDF, viszont a PDF-fel szemben ugyanolyan természetesen tudsz vele dolgozni a böngészőben, mint egy képpel. Mivel nem fog bezavarni a PDF-olvasó interfésze, és az inherens méretét is le tudod kérdezni, ezért media query-kkel úgy igazítod a képernyőmérethez, ahogy szeretnéd (vagy ráhagyod a Fancyboxra, mint egy raszteres kép esetén).
gördítő sávok
(Vagy lehet, hogy csak én bonyolítom túl? :D)
Többoldalas pdf-ekkel kell dolgoznom: 10-20-30 oldal vagy még több.
Emellett a webpage-ek is nagyon hosszúak. Csak a szélességük kötött.
Ebből kifolyólag mindkettőnek gördítő sávja lesz függőlegesen.
Nem az a cél, hogy maga a pdf egy-az egyben látszódjon (hisz ahhoz túl hosszú), hanem a pdf-et tartalmazó doboz beférjen a képbe anélkül, hogy ehhez külön a webpage-et tekergetném.
Ugyanis magának a doboznak is mindig lesz egy saját csúszkája – ezt nem akarom eltűntetni, sőt, kell is – viszont ha egyszerre mindkettőt használni kell, az zavaró.
Tehát ezt a dupla csúszkás hülyeséget szerettem volna megszűntetni, hogy amikor a fájl tartalmát nézem, csak a pdf-ét kelljen használni, a webpage-é ne zavarjon be. Aztán amikor a pdf-et bezártam, tekergethetem tovább az oldalt – és neked hála, ezt most már meg tudom oldani. :)
Ez után már csak szépíteni szeretnék rajta, hogy a FancyBox által kreált lebegő ablakocska (vagy doboz) mérete ne legyen fix, különben nekem kell kitalálni egy olyan ideális méretet, ami még belefér 1024x768-ba is, de nem túl aprócska 2160x3840-on sem. Ez kb lehetetlen. Ebben szerintem az a tanácsod fog segíteni, hogy ne képpontban, hanem százalékosan határozzam meg és már jó is. :)
Viszont ezt már csak holnap…
Százalékosan jó lesz :)
méretezések
Magának a "doboz" méretének állításához már a javascriptben kell turkálni.
Kicsit félve nyitottam meg, mert őszintén szólva nem értek a js-hez, de megtaláltam. :)
Köszönöm, hogy segítettél. :)
PDF
Először próbáltam
Az adatbázis ebben az esetben nem segít, ezt hamar elvetettem.
Ami a megjelenítés módját illeti, ez már kicsit design kérdése is, meg a netezési szokásokról is szól.
Szerintem sokkal elegánsabb, ha magában az oldalban nyílik meg valami, nem pedig mindig külön lapon. Nem töri meg az összképet, hogy folyton vissza kell lépkedni, ráadásul könnyen tele lehet szemetelni ezekkel a lapokkal a böngészőt (kivéve persze ha rögtön bezárod, amit végeztél, de pl.: én nem szoktam).
Ebből következik az a baki, amit gyakran követek el én is, hogy amikor már túl sok fül van, elkezdem bezárogatni őket, és bezárom véletlenül magát az oldalt is (vagy rosszabb esetben egy másikat, aminél nem emlékszem, hogy találtam meg korábban) és utána lehet újra keresgetni.
Valamilyen szinten magamból indulok ki, mert nálam van az, hogy ha netezek, akkor rengeteg külön lap van nyitva egy időben, egymástól tök független oldalakról, tehát generálok én magamnak enélkül is épp elég káoszt a böngészőben. :D
Tudom, hogy nem mindenki így netezik, de sokan meg igen, emiatt próbálom kényelmesre tervezi az oldalt.
Meg ez szerintem látványos is. :)
Ismerős, tipikus mérnök hiba,
Persze úgy csinálod, ahogy akarod, de szerintem célszerű lenne mérni: én tennék be egy Letöltés és egy Megnyitás új ablakban gombot, és mérném, hogy a három közül melyikre kattintanak, és végül a legnépszerűbbet hagynám benn.
Jogos. Az ötlet is tetszik,
Az ötlet is tetszik, hogy mindkét lehetőség benne legyen.
Persze egy kis plusz munkát igényel, de megéri.
Így végül is a látogatóra lehet bízni, döntse el ő, neki, hogy jó és a saját elképzelésem se kell elvetni.
letöltés
Nem teljesen ide tartozik a kérdésem, de ebből a beszélgetésből következik.
Kicsit bugyuta a kérdés is.
Készítettem egy nagyon egyszerű letöltési linket, így:
Azt olvastam, hogy a download attribútum nem támogatott alatta.
Ez igaz? Létezik valami hasonlóan egyszerű megoldás letöltésre, ami megy IE/Safari alatt is?
(PHP nélkül).
Valóban, a download
download
attribútum viszonylag új, az IE és a Safari még nem támogatja. Ahhoz, hogy ezekben és régebbi böngészőkben is letöltésre ajánld fel a fájlt, a válasszal egyContent-Disposition
fejlécet is kell küldjattachment
értékkel. Ehhez vagy PHP-n keresztül kell kiszolgáld a fájlt, vagy a szervert kell megfelelően konfiguráld (például egy htaccess állománnyal, ha van hozzá jogosultságod).Köszönöm :)