Toon posts:

jqTouch <-> Fancybox conflict

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0Henk 'm!

Anoniem: 156868

Topicstarter
Ik ben op dit moment bezig met een iPad webapp voor mijn werk.
Deze wordt gebouwd in HTML5, in een jqTouch framework als je het zo kan noemen.

Ik wil als photoviewer Fancybox (v1.3.4) gebruiken, in mijn ogen de beste lightbox :)
Jammer genoeg is er een conflict tussen Fb en een javascript van jqTouch, jqtouch.js.
Want als ik deze weghaal doet Fb het wel goed.

Ik heb alle functie's van jqTouch er stuk voor stuk uitgehaald, zonder resultaat.

Als ik fancybox aanroep ziet het er als volgt uit:


*klik*

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" />

<script type="text/javascript" >

    $(function(){
            $("a.fancyImg").fancybox({
                'titleShow'         : true,
                'autoScale'         : true,
                'opacity'           : true,
                'scrolling'         : false,
                'overlayOpacity'    : 0,
                'width'             : '500',
                'height'            : '333',
                'showCloseButton'   : 'true',
                'titlePosition'     : 'outside'
            });
    });
    
</script>

<script type="text/javascript"  src="js/jqtouch.js" ></script>

<script type="text/javascript" >
            var jQT = new $.jQTouch({
                addGlossToIcon: true,
                fixedViewport:true,
                fullScreen:true,
                statusBar: 'black'
            });

</script>

</head>

<body >
<div style="margin:50px 0 0 50px;"><a class="fancyImg" href="images/gallery/01.jpg"><img src="images/btn.png" width="128" height="21" alt="Hallowoooooow!" /></a></div>
</body>
</html>


De scripts en css van jqTouch en Fancybox zijn na het testen weer teruggezet naar hun originele waardes.
Na het 'activeren' van Fb loopt de hele pagina vast.

Safari en Chrome hier op mijn mac geeft overigens hetzelfde resultaat.

Vraag ik misschien iets teveel met de verschillende scripts? Wellicht dat jQuery's eigen mobile framework het wel goed vertoond?

Testcase

[Voor 72% gewijzigd door Anoniem: 156868 op 24-05-2011 23:22]


Acties:
  • 0Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Laatst online: 00:48

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Anoniem: 156868 schreef op dinsdag 17 mei 2011 @ 21:49:
Hier *snip* kun je de site vinden (en de achterliggende files). Enige discretie gevraagd, het is namelijk een project van mijn werk :$
We stellen links naar complete sites sowieso niet op prijs (spam); maak een test-case met daarin enkel en alleen code om je probleem te reproduceren. Dat helpt voor jezelf ook om 't probleem snel(ler) te lokaliseren en troubleshooten en het is makkelijker aanpassingen/tweaks te maken zonder je te hoeven bezighouden met neven-effecten op de rest van de site. Daarbij hoef je je dan ook geen zorgen te maken om "discretie" omdat 't over een project "van je werk" gaat; als er overal "lorem ipsum" of testafbeeldingen staan hoef je mensen ook niet te verzoeken discreet te zijn ;)
Anoniem: 156868 schreef op dinsdag 17 mei 2011 @ 21:49:
Mijn javascript kennis is te gering om uit te vinden wat het nou exact het probleem is…
Kan iemand even...?
Toch verwachten we wel eigen inzet; zie ook onze Quickstart. Heb je bijvoorbeeld al gedebugged (Debuggen: Hoe doe ik dat?)? En wat kwam daar uit? Andere dingen geprobeerd die mogelijk tot een oplossing zouden leiden volgens jou? En wat kam daar weer uit? Etc. etc.

[Voor 6% gewijzigd door RobIII op 17-05-2011 22:16]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


Acties:
  • 0Henk 'm!

Anoniem: 156868

Topicstarter
RobIII schreef op dinsdag 17 mei 2011 @ 22:07:
[...]

We stellen links naar complete sites sowieso niet op prijs (spam); maak een test-case met daarin enkel en alleen code om je probleem te reproduceren. Dat helpt voor jezelf ook om 't probleem snel(ler) te lokaliseren en troubleshooten en het is makkelijker aanpassingen/tweaks te maken zonder je te hoeven bezighouden met neven-effecten op de rest van de site. Daarbij hoef je je dan ook geen zorgen te maken om "discretie" omdat 't over een project "van je werk" gaat; als er overal "lorem ipsum" of testafbeeldingen staan hoef je mensen ook niet te verzoeken discreet te zijn ;)


[...]

Kan iemand even...?
Toch verwachten we wel eigen inzet; zie ook onze Quickstart. Heb je bijvoorbeeld al gedebugged (Debuggen: Hoe doe ik dat?)? En wat kwam daar uit? Andere dingen geprobeerd die mogelijk tot een oplossing zouden leiden volgens jou? En wat kam daar weer uit? Etc. etc.
Er is in feite geen echte 'error', debuggen lijkt me niet echt van toepassing.
Overigens is het geen vraag om een stuk script te schrijven, want die is er namelijk al :P Maar inderdaad het lokaliseren van het probleem…
Ik zal de site, of beter gezegd, de enkele pagina morgen wel strippen…

Acties:
  • 0Henk 'm!

Anoniem: 156868

Topicstarter
Startpost aangepast :)

Anoniem: 96523

Wanneer ik de test pagina open krijg ik direct al een paar meldingen in de console, waarvan er ééntje misschien uitkomst bied:
Could not find an element with the id "jqt", so the body id has been set to "jqt". If you are having any problems, wrapping your panels in a div with the id "jqt" might help.
Daarnaast lijkt de tekst die in de HTML wordt geplaatst de content van de afbeelding (gemaakt met "Adobe Photoshop CS4 Macintosh"), dus het lijkt mij een probleem in FancyBox.

Ook, wanneer ik een tweede keer op de knop klik, krijg ik een error. Dit heeft maken met het feit dat de href in de link wordt aangepast naar "#undefined", ipv naar de afbeelding.


Op dit moment kan ik geen echte problemen zien, behalve dat het niet (goed) werkt.

Probeer eens een andere lightbox om te zien of het aan FB ligt, en kijk of je ipv jqTouch gebruik kan maken van jQuery Mobile of Sensa Touch en kijk of het probleem zich dan nog steeds voordoet.

Het zou zelfs een .htaccess probleem kunnen zijn (afbeeldingen verkeerd doorgestuurd, etc), maar dat zou het laatste zijn waar ik naar zou kijken.

Anoniem: 156868

Topicstarter
Anoniem: 96523 schreef op woensdag 25 mei 2011 @ 10:51:
Wanneer ik de test pagina open krijg ik direct al een paar meldingen in de console, waarvan er ééntje misschien uitkomst bied:

[...]

Daarnaast lijkt de tekst die in de HTML wordt geplaatst de content van de afbeelding (gemaakt met "Adobe Photoshop CS4 Macintosh"), dus het lijkt mij een probleem in FancyBox.

Ook, wanneer ik een tweede keer op de knop klik, krijg ik een error. Dit heeft maken met het feit dat de href in de link wordt aangepast naar "#undefined", ipv naar de afbeelding.

Op dit moment kan ik geen echte problemen zien, behalve dat het niet (goed) werkt.

Probeer eens een andere lightbox om te zien of het aan FB ligt, en kijk of je ipv jqTouch gebruik kan maken van jQuery Mobile of Sensa Touch en kijk of het probleem zich dan nog steeds voordoet.

Het zou zelfs een .htaccess probleem kunnen zijn (afbeeldingen verkeerd doorgestuurd, etc), maar dat zou het laatste zijn waar ik naar zou kijken.
Ja, die melding kreeg ik ook, maar dat maakt geen verschil. Heb het wel even in de testcase aangepast.
Ik zal vanavond Fancybox functie voor functie uitschakelen,…

Krijg wel steeds meer de drang om jQuery mobile uit te proberen. In jqTouch is de website in feite een grote pagina, wat voordeel heeft dat je mooie page transitions hebt zoals deze (cube).
Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee