ugrás a tartalomhoz

FancyBox

Dinnye · 2015. Nov. 4. (Sze), 17.55
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:
<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>
PDF hivatkozás:
<a class="fancybox fancybox.iframe"  href="mappanev/fajlnev.pdf">Link szövege</a>
A javascript fájlokba nem nyúltam bele, mind full original.
Itt elérhető:
 
1

Közvetlenül a címét megadva

Joó Ádám · 2015. Nov. 4. (Sze), 23.51
Közvetlenül a címét megadva meg tudja nyitni az IE a PDF-et?
3

Arra gondolsz, hogy ne legyen

Dinnye · 2015. Nov. 5. (Cs), 09.51
Arra gondolsz, hogy ne legyen almappában, hanem a gyökérben, vagy arra, hogy nem FancyBox-szal, hanem hagyományosan?

Ha nincs almappában, akkor sem működik.

Köszönöm amúgy, hogy átraktad jó helyre a kérdésem. :)
6

vagy arra, hogy nem

Joó Ádám · 2015. Nov. 5. (Cs), 14.48
vagy arra, hogy nem FancyBox-szal, hanem hagyományosan?


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.
7

Még nem elérhető

Dinnye · 2015. Nov. 5. (Cs), 16.37
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:
<object data="file/fájlnév.pdf" type="application/pdf" width="700px" height="1000px"></object>
Úgy is, ahogy te írtad.

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.
8

A fejlesztői eszközökben a

Joó Ádám · 2015. Nov. 5. (Cs), 17.51
A fejlesztői eszközökben a konzolon látsz valamit? A hálózati forgalomnál látod a PDF-et betöltődni? A DOM hogy néz ki?
9

A DOM-nál és a Hibakeresőben

Dinnye · 2015. Nov. 6. (P), 12.52
A DOM-nál és a Hibakeresőben nem találtam semmi hibát.
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ő :)
10

Meg tudod keresni a DOM-ban

Joó Ádám · 2015. Nov. 6. (P), 18.15
Meg tudod keresni a DOM-ban az iframe-et és megmutatni?
11

dom

Dinnye · 2015. Nov. 7. (Szo), 11.29
Nem, mert nincs benne iframe. :)
12

Akkor hogyan jeleníti meg a

Joó Ádám · 2015. Nov. 7. (Szo), 16.28
Akkor hogyan jeleníti meg a FancyBox? Objectben?
13

Fent már leírtam.

Dinnye · 2015. Nov. 7. (Szo), 19.05
Fent már leírtam, de bocsi, ha esetleg félreérthetően fogalmaztam.

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:
<a class="fancybox fancybox.iframe"  href="mappanev/fajlnev.pdf">Link szövege</a> 


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.
14

Én ezt mind értem, sőt,

Joó Ádám · 2015. Nov. 7. (Szo), 19.55
Én ezt mind értem, sőt, használtam is hosszú évekkel ezelőtt a Fancyboxot, de csak képek megjelenítéséhez, és nem érzem a lelkesedést, hogy csináljak egy tesztet :) Ha te felteszel valahova egy példagalériát, akkor szívesen megnézem, enélkül marad az, hogy kérdezek, mit látsz.

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.)
15

Oké, bocsi. :) Azt hittem nem

Dinnye · 2015. Nov. 7. (Szo), 21.59
Oké, bocsi. :) Azt hittem nem ismered, vagy csak rosszul magyarázom.

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
16

Próbáld meg légyszíves ezt

Joó Ádám · 2015. Nov. 7. (Szo), 22.50
Próbáld meg légyszíves ezt IE-ben (nekem nincs): http://jsfiddle.net/RHaAX/2389/
17

ó, de jó, köszönöm ezt a

Dinnye · 2015. Nov. 7. (Szo), 23.27
ó, de jó, köszönöm ezt a remek kis tesztet. :)

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?
18

Jól van, akkor ennyit próbálj

Joó Ádám · 2015. Nov. 8. (V), 00.12
Jól van, akkor ennyit próbálj még meg légyszíves IE-ben:
<!DOCTYPE html>
<iframe src="http://www.alinea.hu/custom/alinea/image/data/documents/Az%20elveszett%20lelegzet_a%20hollo.pdf"></iframe>
Amúgy ez a "preload: false" mi benne?


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.
19

Működik

Dinnye · 2015. Nov. 9. (H), 09.58
Működik, viszont ez ugyanolyan, mint az object-es megoldás, csak iframe-mel.
Azzal pedig az IE-nek sem volt baja.
20

Ebben az az érdekes, hogy a

Joó Ádám · 2015. Nov. 9. (H), 18.41
Ebben az az érdekes, hogy a Fancybox ugyanezt csinálja, csak dinamikusan. Mindegy, a megoldás a következő:

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.
21

WOW!

Dinnye · 2015. Nov. 9. (H), 20.01
Kipróbáltam és ez működik mindenhol! :)

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?
22

Az objectnek meg tudsz adni

Joó Ádám · 2015. Nov. 9. (H), 21.42
Az objectnek meg tudsz adni 100%-ot szélességként és magasságként. Figyelj rá, hogy ebben az esetben az összes szülőelemnek a 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.
2

Külföldi fórumokon is

Dinnye · 2015. Nov. 5. (Cs), 09.38
Külföldi fórumokon is beszélnek erről a hibáról, ott javasolták valakinek ezt:
        <script>
              $(document).ready(function () {
      /* fancybox handler */
      $('.fancybox-media').fancybox({
          openEffect: 'none',
          closeEffect: 'none',
          autoSize: true,
          type: 'iframe',
          iframe: {
              preload: false // fixes issue with iframe and IE
          }
      });
  });
        </script>
Nekem sajnos nem segített, sőt... ezt használva még a képmegjelenítő sem működik.
4

Persze, hogy nem

feketeKalapos · 2015. Nov. 5. (Cs), 10.17
Persze, hogy nem, ha azt mondod neki, hogy type:iframe, akkor az a keret és nem a kép objektumokra fog „vadászni”. Érdemes volna egy külön osztály (class) alá rakni a kép fájljaidat és a PDF állományaidat. Azután külön-külön megmondani neki, hogy mit is csináljon velük.

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ó.
5

class-ok

Dinnye · 2015. Nov. 5. (Cs), 14.43
Ha nem a "fancybox" class-ba kerül, akkor nem működik a js.

A galéria így néz ki:
<div class="gallery">
<a class="fancybox" rel="group" href="images/kep01.jpg"><img src="images/kep01.jpg" style="width:150px;"/></a>
<p>Kép alá kiírt szöveg</p><br>
</div>
A HTML-re gondoltam már, de mivel mindenféle táblázatos és egyéb krikszkrakszos elrendezésű PDF-eket kell megjeleníteni, ezeket horror lenne HTML-be átültetni. Plusz vannak hétről hétre változó tartalmú pdf fájlok, amiket csak készen kapok, ezeket elég pusztán felülírni.
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?
23

Ha jól értem, az eredeti

Joó Ádám · 2015. Nov. 9. (H), 22.05
Ha jól értem, az eredeti elképzelésed az, hogy a PDF teljes méretében – vagy kellő vízszintes hely hiányában a képernyő szélességéhez igazodva – jelenjen meg megnyitáskor, úgy, hogy saját görgetősáv nélkül, az oldallal együtt gördüljön. (Ehhez persze feltételezem, hogy egyoldalas PDF-ekről van szó, máskülönben nem tiszta, milyen viselkedést várnál egy többoldalas dokumentumtól.)

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).
24

gördítő sávok

Dinnye · 2015. Nov. 10. (K), 01.09
Más az elképzelés. :) Megpróbálom érthetően leírni, csak kicsit nehéz jól megfogalmazni. :D
(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…
25

Százalékosan jó lesz :)

Joó Ádám · 2015. Nov. 10. (K), 02.26
Százalékosan jó lesz :)
27

méretezések

Dinnye · 2015. Nov. 10. (K), 11.13
Idő közben rájöttem, hogy ha az object méretét állítom %-osan, akkor az csak a "dobozhoz" igazodik - persze az is kell, hogy a pdf tartalom kitöltse normálisan a "dobozt", de ez csak részeredmény.

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. :)
26

PDF

Hidvégi Gábor · 2015. Nov. 10. (K), 10.29
Miért nem új tabon jeleníted meg a pdf-et, ahol a felhasználó azt csinál vele, amit csak akar, könnyen lementheti, úgy méretezi, ahogy neki tetszik, ha nagy a monitora, több oldalt egymás mellé rakhat? Ezzel a fancybox-szal csak korlátozod mindenben.
28

Először próbáltam

Dinnye · 2015. Nov. 10. (K), 12.08
Először próbáltam minimalizálni a pdf-ek számát, így amit tudtam átalakítottam pdf-ből html-be, de mivel a pdf-ek nem kiirthatóak teljesen az oldalról, a maradékkal kezdeni kell vmit.
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. :)
29

Ismerős, tipikus mérnök hiba,

Hidvégi Gábor · 2015. Nov. 10. (K), 12.09
Ismerős, tipikus mérnök hiba, amikor úgy terveznek meg valamit, ami nekik kényelmes, ez az első, amit megtanítottak az egyetemen. Lehet, hogy te szereted a dobostortát, de horgászni is azt viszel csalinak?

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.

Meg ez szerintem látványos is.
Nyilván. A kérdés viszont az, hogy ki a célközönség, mennyire gyakran néznek meg ilyen pdf-eket, és mit csinálnak vele. Mert ha idősebb korosztály, őket nem érdeklik a látványos dolgok, animációk, csak az idejüket rablod. Ha szívesebben töltik le a gépükre későbbi tanulmányozás céljából, akkor az ilyen beágyazások nem feltétlenül a legcélszerűbbek, mert nem biztos, hogy támogatják a kényelmes használatot.
30

Jogos. Az ötlet is tetszik,

Dinnye · 2015. Nov. 10. (K), 12.20
Jogos.

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.
31

letöltés

Dinnye · 2015. Nov. 16. (H), 10.56
Sziasztok!

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:
<a href="mappa/file.akármi" download>MENTÉS</a>
Aztán feltűnt, hogy az IE nem tud mit kezdeni ezzel (se).
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).
32

Valóban, a download

Joó Ádám · 2015. Nov. 16. (H), 20.46
Valóban, a 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 egy Content-Disposition fejlécet is kell küldj attachment é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).
33

Köszönöm :)

Dinnye · 2015. Nov. 17. (K), 09.34
Köszönöm :)