Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm building a single page website and that means that all the links need to call for post content dynamically. I found this tutorial and with the help from some folks from StackOverflow I managed to create pages that do just that.

But a new challenge unfolded itself when I needed to make set of dynamic galleries in a page. So here what needs to happen: There is a list of post-titles with galleries inside each one. When I click one of the links the post with the thumbnails should show right below it. I managed to do just that just fine, but when a thumbnail is clicked, the bigger version should appear right at the side. I applied the same code but it just doesn't work!

Here's the code I have 'til now:

  • index.php (the gallery section)

    have_posts()) : $recent->the_post();?>
    <div class="main" id="galeria">
    
            <div class="controle">
                <h1>A Galeria</h1>
                <nav id="galerias">
                <?php $args = array('post_type'=>'galeria');
    
                $myposts = get_posts( $args );
                foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
                    <li>
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </li>
                <?php endforeach; 
                wp_reset_postdata();?>
                </nav>
    
                <div id="thumbnails">
    
                </div>
    
    
            </div>
    
                <div id="conteudo-galeria">
                    <div id="texto-galeria">
    
                    </div>
                </div>
    
    </div>
    
  • thumbnails.php (bringing up the thumbnails. Working.)

    $(document).ready(function() {
    
    
        var hash = window.location.hash.substr(1);
        var href = $('#galerias li a').each(function(){
            var href = $(this).attr('href');
            if(hash==href.substr(0,href.length)){
                var aCarregar = 'hash+.html #itens';
                $('#thumbnails').load(aCarregar)
            }
        });
    
        $('#galerias li a').click(function() {
    
            var aCarregar = $(this).attr('href')+' #itens';
            $('#thumbnails').hide('fast',carregarConteudo);
            $('#carregando').remove();
            $('#thumbnails').append('<span id="carregando">Carregando...</span>');
            $('#carregando').fadeIn('normal');
    
            window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length);
    
            function carregarConteudo () {
                $('#thumbnails').load(aCarregar,'',mostrarNovoConteudo);
            }
            function mostrarNovoConteudo () {
                $('#thumbnails').show('normal',esconderCarregando);
            }
            function esconderCarregando () {
                $('#carregando').fadeOut('normal');
            }
    
            return false;
        });
    
    });
    

    galeria.php (addapted thumbnails to bring the image. Not working)

    $(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#itens a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length)){
            var aCarregar = 'hash+.html #conteudo-galeria';
            $('#conteudo-galeria').load(aCarregar)
        }
    });
    
    $('#itens a').click(function() {
    
        var aCarregar = $(this).attr('href')+' #conteudo-galeria';
        $('#conteudo-galeria').hide('fast',carregarConteudo);
        $('#carregando').remove();
        $('#atracoes').append('<span id="carregando">Carregando...</span>');
        $('#carregando').fadeIn('normal');
    
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length);
    
        function carregarConteudo () {
            $('#conteudo-galeria').load(aCarregar,'',mostrarNovoConteudo);
        }
        function mostrarNovoConteudo () {
            $('#conteudo-galeria').show('normal',esconderCarregando);
        }
        function esconderCarregando () {
            $('#carregando').fadeOut('normal');
        }
    
        return false;
    });
    

    });

iamge.php (the image page from the gallery)

<?php get_header(); ?>

    <!-- Main -->
    <div class="main">

    <div id="conteudo-galeria">
    <div id="texto-galeria">

    <?php if (have_posts()): while (have_posts()) : the_post(); ?>

        <!-- imagem -->

            <?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "full"); ?>
                <img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" alt="<?php $post->post_excerpt; ?>" />
            <?php else : ?>
                <a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>"><?php echo basename($post->guid) ?></a>
            <?php endif; ?>

        <!-- /imagem -->

    <?php endwhile; ?>

    <?php else: ?>

    <?php endif; ?>

    </div>
    </div>

    </div>
    <!-- /Main -->


<?php get_footer(); ?>

Wow, this was long. thank you if you had the patience to follow 'til here. Currently, if I click in the thumbnail, I'm directed to the image.php.

PS: The js should also make history work, but it isn't. It's not a priority right now but if you guys know anyway to fix it it'll be much appreciated.

share|improve this question

2 Answers 2

You can use Advanced Custom Fields plugin - paid, to to that:

http://www.advancedcustomfields.com/add-ons/gallery-field/

Plase what a video.

Also on lightbox you need this Jquery plugin:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Create a custom post type with name gallery.

Then create a page-gallery.php and put this code: :

<?php
     $args=array(
           'post_type' => 'gallery',
           'post_status' => 'publish',

           'posts_per_page' => 12,
           'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 )
                  );
      query_posts( $args ); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>

<div class="gallery_item">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(145,96)); ?></a>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile; endif; ?>

Then create single-gallery.php and put code like this, some modification meybee needed.

<?php
                $images = get_field('bildes');
                if( $images ): ?>

                            <?php foreach( $images as $image ): ?>
                                <div class="gal_thumb">
                                <a href="<?php echo $image['sizes']['large']; ?>" rel="prettyPhoto[gallery<?php echo $post_id;?>]"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['title']; ?>"/></a>                                    </div>
                            <?php endforeach; ?>
                    <?php
                    ?>
                <?php endif; ?>
share|improve this answer
    
Thanks for the quick answer, @Foxsk8! Your suggestion is bordering what I need and I'll certainly gravitate towards it if there is no exact solution. But I already made a custom post type for the gallery and it's working the way I wish for, the only problem is the displaying the image itself. A lightbox would break the page's design as well as ACF' gallery. –  GuiHarrison Jan 10 at 1:20
    
Is there a demo link? If i am right, your problem is that lightbox is broken? Use rel="prettyPhoto[gallery<?php echo $post_id;?>] no-margin-for-errors.com/projects/… –  Foxsk8 Jan 10 at 1:22
1  
@Foxsk8 Are you affiliated with the plugin? If so, you'll have to state that in your answer. –  kaiser Jan 10 at 7:01
    
@Foxsk8, you may have misunderstood. When I say the lightbox would brake the page's design, I meant visually, lightbox doesn't belong to the whole experience. I don't have a live preview, unfortunately. –  GuiHarrison Jan 10 at 12:45
up vote 0 down vote accepted

I (partially) solved the problem!

Since the content that is being watched for event is only loaded after the first ajax kicks in, the second ajax doesn't know where to look for it. The thing is there are new ways to watch for events in jQuery that completely solves this problem. the on('click'... handler watches for any element that is inside the parent specified. So the second js file (galeria.js) should look like this:

$(document).ready(function() {


    $('#thumbnails').on('click','a', function(event) {

        var aCarregar = $(event.target).attr('href')+' #texto-galeria';
        $('#texto-galeria').fadeOut('fast',carregarConteudo);
        $('#carregando').remove();
        $('#conteudo-galeria').append('<span id="carregando">Carregando...</span>');
        $('#carregando').fadeIn('normal');

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

        function carregarConteudo () {
            $('#texto-galeria').load(aCarregar,'',mostrarNovoConteudo);
        }
        function mostrarNovoConteudo () {
            $('#texto-galeria').fadeIn('normal',esconderCarregando);
        }
        function esconderCarregando () {
            $('#carregando').fadeOut('normal');
        }

        return false;
    });

});

The parent, however needs to be in the page when it loads (can't be dynamic too) so I had to change #itens to #thumbnails.

I said partially solved because although the ajax is now working, the image is not being displayed on the div. I've posted a new question here if you can help me out.

Thank you!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.