Problem Pagination und Fancybox

Freshmojojo · 27 Oktober 2013

Hey,
ich entwickle seid geraumer Zeit eine Website... bzw ein Galerie darauf. Nun ist es so, dass ich über javasript eine Pagination gestaltet hab und er dann am ende halt nur noch mit einem .innerHTML Befehl die links einsetzt. Nun wird aber meine Fancybox nicht mehr ausgeführt... klingt kompliziert ist es auch guckt es euch einfach mal an... Vielen Danke :)
lg Moritz

HTML:

        <!-- Fancybox -->
        <link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
        <script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <!-- ENDS Fancybox -->
       
       
<script>
var rpp = <?php echo $rpp; ?>; // results per page
var last = <?php echo $last; ?>; // last page number
function request_page(pn){
    var results_box = document.getElementById("results_box");
    var pagination_controls = document.getElementById("pagination_controls");
    results_box.innerHTML = "loading results ...";
    var hr = new XMLHttpRequest();
    hr.open("POST", "pagination_parser.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var dataArray = hr.responseText.split("||");
            var html_output = "";
            for(i = 0; i < dataArray.length - 1; i++){
                var itemArray = dataArray[i].split("|");
                html_output += '<li><a href="'+itemArray[2]+'"rel="group1" class="fancybox" title="'+itemArray[0]+'"><img src="'+itemArray[2]+'"style="width:204px; height:148px;" alt="Vorschau"></a></li>';
            }
            results_box.innerHTML = '<ul id="portfolio-list" class="gallery">' +html_output+ '</ul>';
        }
    }
    hr.send("rpp="+rpp+"&last="+last+"&pn="+pn);
    // Change the pagination controls
    var paginationCtrls = "";
    // Only if there is more than 1 page worth of results give the user pagination controls
    if(last != 1){
        if (pn > 1) {
            paginationCtrls += '<button onclick="request_page('+(pn-1)+')">&lt;</button>';
        }
        paginationCtrls += ' &nbsp; &nbsp; <b>Page '+pn+' of '+last+'</b> &nbsp; &nbsp; ';
        if (pn != last) {
            paginationCtrls += '<button onclick="request_page('+(pn+1)+')">&gt;</button>';
        }
    }
    pagination_controls.innerHTML = paginationCtrls;
}
</script>

Freshmojojo · 27 Oktober 2013

Wohingegen dieser Code (der im prinzip genau das gleiche macht nur ohne pagination einwandfrei funktioniert.. ich bin ratlos :(

HTML:

                            while($row = mysql_fetch_array($res))
                                {
                                ?>

                                   
                                                                       
                                            <li><a href="<?php echo $row [2];  ?>" rel="group1" class="fancybox" title="<?php echo $row [1];  ?>"><img src="<?php echo $row [2];  ?>"
                                            style="width:204px; height:148px;" alt="Vorschau"></a></li>

                                                                                       
                                           
                                   
                                <?php   
                                }
                                ?>
                                </ul>
                                <?php
                            mysql_close($verbindung);
                        ?>

Tronjer · 27 Oktober 2013

Meine Vermutung: Falls kein JS-Fehler vorliegt, dürfte es daran liegen, dass die Elemente mit der Klasse .fancybox erst nach dem Laden der Seite per AJAX erzeugt und deshalb vom Plugin nicht angesprochen werden können.

Nebenbei bemerkt ist der Code grausig. Wenn schon AJAX, dann verwende jQuery und verlege das zu erzeugende HTML in dein PHP-Script.

Freshmojojo · 27 Oktober 2013

Danke erstmal dass du geantwortest hast :) ich weis dass mein code gruselig ist bin noch ein relativer Neuling in der Webprogrammierung... wie genau stellst du dir dass vor das HTML in das PHP sript zu verlagern :)

Freshmojojo · 27 Oktober 2013

Mein Aufbau des oben stehenden Codes:
1) datenbank-verbindung
<head>
ganzen klassen und so einbinden
das komische js von oben
</head>
<body>
menü.. etc
main(content){
<div id="results_box"></div>
<div id="pagination_controls"></div>
<script> request_page(1); </script>
}
</body>
und noch der footer
also die seite ist direkt in diesem php dokument mit drinne ....

Tronjer · 27 Oktober 2013

Freshmojojo schrieb:
Danke erstmal dass du geantwortest hast :) ich weis dass mein code gruselig ist bin noch ein relativer Neuling in der Webprogrammierung... wie genau stellst du dir dass vor das HTML in das PHP sript zu verlagern :)

Du sendest ein POST an die Seite pagination_parser.php und schreibst bei success eine <ul> per JS. Diese Liste könntest du auch per PHP in der AJAX-URL rendern und das Ergebnis anschließend als HTML zurückgeben lassen. Ich würde dir aber, wie bereits erwähnt, jQuery AJAX empfehlen. Das ist kürzer und leichter lesbar.

Nur löst das alleine dein Problem mit der Fanybox noch nicht. Ohne das Plugin jetzt zu kennen, gehe ich mal davon aus, dass es keine Elemente adressiert, die asynchron nachgeladen werden. Hier musst du dir wahrscheinlich ein anderes Konzept überlegen.

Cheffchen · 27 Oktober 2013

Hallo,

versuche doch mal zum test colorbox als zoom.
ich nutze das immer und habe das auch bei einer kleinen ajax spielerei eingefügt und funktionierte ohne problem und tricks.

Cheffchen

Freshmojojo · 27 Oktober 2013

Danke :) Ich hab leider relativ wenig ahnung von js und nach ausfürlicher suche bin ich jetzt auf diesen Link gestoßen.. ich habe so das gefühl das dies die lösung des Problems sein könnte :) http://kkapsner.de/content/Programmieren/JavaScript/Nützliches/innerHTML und das <script>-Tag.html
hast du vll eine Ahnung wie ich dies auf mein script übhertrage?

Freshmojojo · 27 Oktober 2013

Cheffchen schrieb:
Hallo,

versuche doch mal zum test colorbox als zoom.
ich nutze das immer und habe das auch bei einer kleinen ajax spielerei eingefügt und funktionierte ohne problem und tricks.

Cheffchen

Wie genau binde ich die colorbox ein? :)

Freshmojojo · 27 Oktober 2013

Tut mir leid wenn ich des öfteren ein paar dumme Fragen stelle da ich relativ neu in der Webprogrammierung bin...

bdt600 · 27 Oktober 2013

Wer lesen kann, ist klar im Vorteil: http://www.jacklmoore.com/colorbox/ Besonders bei Crosspostings :(

Freshmojojo · 27 Oktober 2013

bdt600 schrieb:
Wer lesen kann, ist klar im Vorteil: http://www.jacklmoore.com/colorbox/ Besonders bei Crosspostings :(

Ja haste recht aber ich hab mich ja schon dafür entschuldigt werd es auch nicht wieder machen... nur mehr kann ich ja momentan auch nicht machen als es tut mir leid zu sagen...
Auf der seite bin ich auch schon die ganze zeit... nur leider weis ich nicht wie ich das auf mein code übertragen kann :( Sry wie gesagt neuling..

Cheffchen · 27 Oktober 2013

Hallo,

genau wie fancy,
hier runterladen: http://www.jacklmoore.com/colorbox/
die css und js einbinden
im html code brauchst nichts anpassen nur noch den script aktivieren

HTML:

        <script>
            $(document).ready(function(){
                $(".fancybox").colorbox();
            });
        </script>

wenn es funktioniert kann man ja der schönheit halber das html anpassen.

Cheffchen

Freshmojojo · 27 Oktober 2013

Cheffchen schrieb:
Hallo,

genau wie fancy,
hier runterladen: http://www.jacklmoore.com/colorbox/
die css und js einbinden
im html code brauchst nichts anpassen nur noch den script aktivieren

HTML:

<script> $(document).ready(function(){ $(".fancybox").colorbox(); }); </script>

wenn es funktioniert kann man ja der schönheit halber das html anpassen.

Cheffchen

Danke ich probier das jetzt mal aus wenn das funktioniert wär klasse denn ich finde die colurbox glaube sogar noch hübscher als die fany :) Danke

Freshmojojo · 27 Oktober 2013

Okay habe jetzt soweit das eingebunden... das heist ich habe nun

PHP:

        <link media="screen" rel="stylesheet" href="example5/colorbox.css" />
        <script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
       
                <script>
            $(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".group1").colorbox({rel:'group1'});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
                $(".group4").colorbox({rel:'group4', slideshow:true});
                $(".ajax").colorbox();
                $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
                $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
                $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
                $(".inline").colorbox({inline:true, width:"50%"});
                $(".callbacks").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                });

                $('.non-retina').colorbox({rel:'group5', transition:'none'})
                $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
               
                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>

und dann mein ajax

PHP:

<script>
var rpp = <?php echo $rpp; ?>; // results per page
var last = <?php echo $last; ?>; // last page number
function request_page(pn){
    var results_box = document.getElementById("results_box");
    var pagination_controls = document.getElementById("pagination_controls");
    results_box.innerHTML = "loading results ...";
    var hr = new XMLHttpRequest();
    hr.open("POST", "pagination_parser.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var dataArray = hr.responseText.split("||");
            var html_output = "";
            for(i = 0; i < dataArray.length - 1; i++){
                var itemArray = dataArray[i].split("|");
                html_output += '<p><a class="group1" href="upload/funny-754817594.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>';
            }
            results_box.innerHTML = '<ul id="portfolio-list" class="gallery">' +html_output+ '</ul>';
        }
    }
    hr.send("rpp="+rpp+"&last="+last+"&pn="+pn);
    // Change the pagination controls
    var paginationCtrls = "";
    // Only if there is more than 1 page worth of results give the user pagination controls
    if(last != 1){
        if (pn > 1) {
            paginationCtrls += '<button onclick="request_page('+(pn-1)+')">&lt;</button>';
        }
        paginationCtrls += ' &nbsp; &nbsp; <b>Page '+pn+' of '+last+'</b> &nbsp; &nbsp; ';
        if (pn != last) {
            paginationCtrls += '<button onclick="request_page('+(pn+1)+')">&gt;</button>';
        }
    }
    pagination_controls.innerHTML = paginationCtrls;
}
</script>

ich hoffe, dass ich keinen fehler gemacht habe, jedoch wird nun wenn ich den link klicke genau wie bei meinem versuch mit der fancy ein neuer tab im browser geöffnet :(

Freshmojojo · 27 Oktober 2013

Ja doch hab jetzt einen fehler von selber gefunden (die ganze document ready function die ich drinne hab brauche ich garnicht...

jedoch weis ich nicht wo ich mit dem hin soll:

PHP:

        <script>
            $(document).ready(function(){
                $(".fancybox").colorbox();
            });
        </script>

weil wenn ich das anstatt meinem schrott da einfüge passiert genau so wenig :(

Cheffchen · 28 Oktober 2013

Hallo,

genau das ganze $(document).ready(function(){ brauchst nicht sondern nur das eine, alle löschen und nur die eine rein.
jquery ist aber auch eingebunden?

Wenn das nicht funzt kann man ohne link nicht mehr sagen.

Cheffchen

Freshmojojo · 28 Oktober 2013

PHP:

<link rel="stylesheet" href="js/colorbox-master/example3/colorbox.css" />
<script src = "http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src = "js/colorbox-master/jquery.colorbox-min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".group1").colorbox({rel:'group1'});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
                $(".group4").colorbox({rel:'group4', slideshow:true});
                $(".ajax").colorbox();
                $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
                $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
                $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
                $(".inline").colorbox({inline:true, width:"50%"});
                $(".callbacks").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                });

                $('.non-retina').colorbox({rel:'group5', transition:'none'})
                $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
               
                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>

Sobald ich das hier in den head einfüge funktioniert das ganze wenn ich es im body mit:

Code:

<p><a class="group1" href="js/colorbox-master/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>

aufrufe :)
jedoch funktioniert das ganze gleich nichtmehr wenn ich es versuche in meinem ajax zu öffnen dort öffnet sich einfach nur ein neuer tab und keine colorbox :(

Code:

<script>
var rpp = <?php echo $rpp; ?>; // results per page
var last = <?php echo $last; ?>; // last page number
function request_page(pn){
    var results_box = document.getElementById("results_box");
    var pagination_controls = document.getElementById("pagination_controls");
    results_box.innerHTML = "loading results ...";
    var hr = new XMLHttpRequest();
    hr.open("POST", "pagination_parser.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var dataArray = hr.responseText.split("||");
            var html_output = "";
            for(i = 0; i < dataArray.length - 1; i++){
                var itemArray = dataArray[i].split("|");
                html_output += '<p><a class="group1" href="js/colorbox-master/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>';
            }
            results_box.innerHTML = '<ul id="portfolio-list" class="gallery">' +html_output+ '</ul>';
        }
    }
    hr.send("rpp="+rpp+"&last="+last+"&pn="+pn);
    // Change the pagination controls
    var paginationCtrls = "";
    // Only if there is more than 1 page worth of results give the user pagination controls
    if(last != 1){
        if (pn > 1) {
            paginationCtrls += '<button onclick="request_page('+(pn-1)+')">&lt;</button>';
        }
        paginationCtrls += ' &nbsp; &nbsp; <b>Page '+pn+' of '+last+'</b> &nbsp; &nbsp; ';
        if (pn != last) {
            paginationCtrls += '<button onclick="request_page('+(pn+1)+')">&gt;</button>';
        }
    }
    pagination_controls.innerHTML = paginationCtrls;
}
</script>

hab ich da jetzt ein denkfehler drinne oder ist das das selbe problem wie bei der fancy?

Cheffchen · 28 Oktober 2013

Hallo,

und wo ist da der colorbox code.
Zeige ein Link, meinentwegen oder vielleicht besser in eine redosierte version, wo halt nur das wichtigste drin steht.

Also zuerst eine seite mit colorbox, testen > läuft
jetzt ajax einbauen, test > ??? und von dem dann mal link zeigen.

Cheffchen

Freshmojojo · 28 Oktober 2013

Ja ich weis nicht genau was du meinst :( also ich habe doch im letzten codefenster den einen link in meine ajax pagination eingespiest... das heist ich hab da jetzt 10 mal den link stehen... ist ja nur zum testen. jedoch funktioniert keiner davon, jedenfalls nicht mit colorbox... es öffnet sich ein neuer tab...
ich hab aber dies hier gefunden und glaube das ist die lösung de problems jedoch hab ich von js wenig ahnung um das auf meinen code zu übertragen...
http://bytes.com/topic/javascript/answers/904212-colorbox-not-appearing-links-called-through-ajax

Problem Pagination und Fancybox

Mitglied

Mitglied

Senior HTML'ler

Mitglied

Mitglied

Senior HTML'ler

Senior HTML'ler

Mitglied

Mitglied

Mitglied

bdt600

Guest

Mitglied

Senior HTML'ler

Mitglied

Mitglied

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied