Încărcare conținut pagină cu AJAX folosind Fancybox?

Question

Încărcare conținut pagină cu AJAX folosind Fancybox?

10 ian. 2014, 00:46:52

Vizualizări: 18.9K

Voturi: 0

Pot găsi multe tutoriale despre cum să încarci pagini dinamic în WordPress și chiar conținutul paginilor, cum ar fi acestea:

cum-sa-incarci-doar-conținutul-unui-post-wordpress-folosind-ajax

și

Cea mai bună metodă de a încărca conținutul unei pagini în popup-ul Fancybox?

Dar ele nu mă ajută exact unde vreau să ajung.

Problema principală pe care o întâmpin este că vreau să deschid pagina în Fancybox prin Ajax, dar vreau și ca acea pagină să fie accesibilă prin URL-ul ei obișnuit, în cazul în care doresc să trimit un utilizator direct la acea pagină. Înțeleg că aș putea duplica fiecare pagină (una folosind un șablon simplificat pentru Fancybox, cealaltă pentru site-ul propriu-zis), dar asta ar însemna un coșmar de întreținere pe termen lung.

Pe scurt; vreau să folosesc AJAX pentru a prelua și încărca doar conținutul unui post și să-l afișez folosind Fancybox.

Puteți să mă ajutați? :)

user2558393

13

ajax

Toate răspunsurile la întrebare

Foxsk8 131 · Accepted Answer · 2014-01-10T02:27:40Z

Iată. Google nu folosește JS și nu este nimic sofisticat. De asemenea, linkurile pot fi folosite fără GET, doar URL simplu: site.com/nume-post/

Pe o singură pagină:

<?php
$apost = $_GET["type"];
preg_replace('/_/', 'html', preg_replace('/%/', 'html', htmlentities(mysql_real_escape_string($apost))));
?>
<?php if($apost == 'iframe') { ?>
<?php get_header('single'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div class="popup people">
    conținut popup
</div>
<?php endwhile; endif; ?>
</body>
</html> 
<?php } else { ?>

<?php get_header(); ?>
<div class="single">
    <?php if (have_posts()) : while (have_posts()) : the_post();?>
    conținut principal
    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

<?php } ?>

Pe buton HTML sau link, etc:

<a href="<?php the_permalink();?>#<?php the_ID(); ?>" data-fancybox-type="iframe" class="various" id="<?php the_ID(); ?>" data-class="<?php echo get_post_type( get_the_ID() ); ?>">Vezi articol</a>

În javascript:

$(".results .results_item a").each(function(){
        var hrefParts = $(this).attr('href').split('#');
        $(this).attr('href', hrefParts[0] + '?type=iframe#' + hrefParts[1]);
        });

$("a").fancybox({
    maxWidth    : 615,
    maxHeight   : 2000,
    fitToView   : true,
    width       : '100%',
    height      : '100%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    wrapCSS : 'people' // adaugă un selector de clasă la învelișul fancybox
});

$("a").click(function(event) {
        window.location.hash = this.hash;
    });

    if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Pune hash-ul în variabilă și elimină caracterul #
      var new_class_name = $("#" + hash).data("class");
      $("#" + hash).fancybox({
        maxWidth    : 615,
        maxHeight   : 2000,
        fitToView   : true,
        width       : '100%',
        height      : '100%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        wrapCSS : new_class_name // adaugă un selector de clasă la învelișul fancybox
    }).trigger('click');
      // hash găsit
      } else {
          // Niciun hash găsit
      }