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.

premise i don't really know anything about wordpress framework, i only know how to use it. I need to change an already exists gallery with loooots of images, with a simple gallery like fancybox (the plugin..). The older programmer built a page with wp native functions, but i really don't know how to move there. I've installed the plugin (fancybox) by adding it with the tools "add plugin" in the backend, but now i need to edit an existing page called "taxonomy-lookbook-cat.php", and here's the source code of it:

Template Name: Lookbook

<?php get_header(); ?>
        <div id="content"> 
            <div id="inner-content" class="wrap clearfix">

                    <div id="main" class="twelvecol first clearfix" role="main">
                        <?php $cat = get_query_var('lookbook-cat'); ?> 

                        <?php $catargs = array(

                            'orderby'            => 'name',
                            'order'              => 'ASC',
                            'style'              => 'list',
                            'show_count'         => 0,
                            'hide_empty'         => 0,
                            'use_desc_for_title' => 0,
                            'title_li'           => __( '' ),
                            'echo'               => 0,
                            'taxonomy'           => 'lookbook-cat',
                            'walker'             => null
                        ); ?>
                        <div id="lookbook-cat">

                            <ul style="color:white; background:black"><?php echo wp_list_categories( $catargs ); ?></ul>

                            $args = array(
                                'post_type' => 'lookbook',
                                'order'     => 'ASC',
                                'lookbook-cat'      => $cat, 

                            $items_small = new WP_Query($args);
                        <?php   if( $items_small->have_posts()): ?>

                        <div class="rs-carousel small">     
                        <?php while( $items_small->have_posts() ) : $items_small->the_post(); ?>
                            <li id="small-<?php the_ID(); ?>">
                                <?php the_post_thumbnail( 'carousel-small' ); ?>
                        <?php endwhile; ?>

                        <?php else: ?>
                                Oh ohm no products!
                        <?php endif; ?>
                        <?php wp_reset_query(); ?>


                            $items_big = new WP_Query( $args );
                        <?php   if( $items_big->have_posts() ): ?>

                        <div class="rs-carousel big">

                        <?php $counter = -1; ?>     
                        <?php while( $items_big->have_posts() ) : $items_big->the_post(); ?>
                            <?php $counter++; ?>    
                            <li id="big-<?php the_ID(); ?>">
                                     $attributes = array(
                                        'id'    => 'img-' . $counter,
                                <?php the_post_thumbnail( 'carousel-big', $attributes); ?>
                                <div class="product-title"><?php the_content(); ?></div>
                        <?php endwhile; ?>

                        <!-- <div class="shield"></div> -->
                        <?php else: ?>
                                Oh ohm no products!
                        <?php endif; ?>
                    </div> <!-- end #main -->
                    <div id="social-likes"> 
                        <div class="fb-like" data-href="<?php echo bloginfo('url') . $_SERVER["REQUEST_URI"]; ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                        <div class="g-plusone" data-size="medium" data-annotation="none"></div> 
            </div> <!-- end #inner-content -->
<div id="paginator"></div>  
        </div> <!-- end #content -->

<?php get_footer(); ?>

it is divided in "two gallery" a big and a small. I need to rewrite that page and in a while or a foreach cicle it should show something like this:

<li><img class="the fancybox class" style="max-width:100%;width:100%;height:auto;" src="TheURLOfAllTheExistanImage"></li>

Thanks for the support, i need it!

share|improve this question
Please read How to Ask, file an edit and rework your question to make it ... better. Thanks. –  kaiser Feb 12 at 13:11

1 Answer 1

There are several Fancybox plugins. Which one did you install? Some Fancybox plugins will automatically make every linked image on a page/post into a fancybox.

Some other plugins will require you to add the code to the images you want to use. In your case the gallery is being built outside the_content() function - so you will need to alter the code to work with the Fancybox plugin. Or better yet, get a gallery plugin that comes with a fancybox option, such as NextGen Gallery.

Fancybox plugins typically target linked images that have a "rel" attribute. For example, this plugin Fancybox , adds the a rel="fancybox" attribute to every image that has a link. In your case those images do not have the rel attribute and that's part of the reason why it's not working.

It would be easier to help you if we could maybe see the page of where this gallery is.

share|improve this answer

Your Answer


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.