Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
jQuery Mobile mit Photoswipe
#1
Hallo,
beschäftige mich gerade mit jQuery Mobile ein sehr interessantes Modul, doch leider sind meine JS Künste noch nicht so ausgereift das ich damit ohne Probleme arbeiten kann, es zwick und hackt an jeder Ecke...

So..., aber nun zu meiner Problembeschreibung:

Habe auf der Seite eine Galerie eingebaut (Name der Galerie Photoswipe) funktionier auch so weit ganz gut.
Das einzige Problem ist der Close Button in der Slide Galerie (Mit klick auf ein Bild gelange ich in die Slideshow) hier stimmt irgend-etwas mit dem Verweis der Back Seite (Click auf das weiße X links unten) nicht, hier sollte ich wieder auf die Listendarstellung der Galerie zurückkommen, ich werde richtig auf die Seite verwiesen doch es erscheint ein unednlicher Loading Prozess?

In der Firebug Konsole ist mir auch noch dieser Fehler beim betreten des Galerie-Sliders aufgefallen:

Zitat:l.data("page") is undefined
[Bei diesem Fehler anhalten] I()}function J(M){a.mobile.pageContain...("ui-mobile-viewport-transitioning");

Es ist mir klar was dieser Fehler bedeutet dennoch weis ich nicht wie ich das lösen kann!

Ich bin für jede brauchbare Antwort dankbar!

Hier noch der benutzte JS Code mit dem HTML:

Code:
<script type="text/javascript" src="js/klass.min.js"></script>
    <script type="text/javascript" src="js/code.photoswipe.jquery-3.0.3.min.js"></script>
    
<script type="text/javascript">
// <![CDATA[
(function(window, $, PhotoSwipe){
            $(document).ready(function(){                
                $('div.gallery-page')
                    .live('pageshow', function(e){                        
                        var
                            currentPage = $(e.target),
                            options = {},
                            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));            
                        return true;                        
                    })
                    
                    .live('pagehide', function(e){                        
                        var
                            currentPage = $(e.target),
                            photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
                        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                            PhotoSwipe.detatch(photoSwipeInstance);
                        }                        
                        return true;                        
                    });                
            });        
        }(window, window.jQuery, window.Code.PhotoSwipe));
// ]]>        
</script>

Code:
<!-----------------------------------------------------------------------------------------
--  Bilder Gallerie
------------------------------------------------------------------------------------------>
    
    <div data-role="page" id="gallerie" class="gallery-page">
        <div data-role="header" data-position="fixed">
        <a href="#home" data-icon="back" data-iconpos="notext" data-transition="flip">Back</a>
            <h1>Bilder Gallerie</h1>
    </div>
    
    <div data-role="content">
        <ul class="gallery">
            <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 01" /></a></li>
            <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 02" /></a></li>
            <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 03" /></a></li>
            <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 04" /></a></li>
            <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 05" /></a></li>
            <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 06" /></a></li>
        </ul>
    </div>
        
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#kontakt" data-transition="flip">Kontakt</a></li>
                <li><a href="#buchen" data-transition="flip">Buchen</a></li>
            </ul>
        </div>    
    </div>
    </div>
Zitieren
#2
So das Problem ist gelöstBig Grin
Ich habe das rel="external" im html vergessen nun funktioniert alles.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste