Customize WordPress Theme Lightbox

2 Views

I have downloaded this theme: http://themeforest.net/item/havva-portfolio-for-freelancers-agencies/full_screen_preview/10666379

If you click on one of the pictures, there opens a new page with the picture and a description. If you click one more time on the picture, there will open a lightbox with the picture in it.

Read More

Now, I have no descriptions for my pictures, so I think that I don’t need a new page to open. What I want is, to open the images in that lightbox when I click on them in the portfolio gallery view (on the front page). I don’t want the new page between looking at the thumbnail and having the lightbox open.

What I tried to do so far:

This is the code of the main page/front page to open a new page with the image: 

                        <div class="front">
                            <a href="<?php the_permalink(); ?>">
                                <?php if ( has_post_thumbnail() ) { ?>
                                    <?php echo get_the_post_thumbnail( $post->ID, array(300,$height) ); ?>
                                <?php }else{ ?>
                                    <img src="<?php echo esc_url(WF_IMAGES.'no-thumb.png'); ?>" />
                                <?php } ?>
                            </a>
                        </div>

This is the Code of the new page to open the lightbox with the image: 

<div class="featured-portfolio"><?php echo $media; ?></div>

I thought I could just implement the Code of the new page to the front page, but I don’t know what is in that $media variable or how to get to its content to get to the lightbox link…

Could you maybe help me here?

Greetings,
Linda

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. If you look at the frontend code for the image that does open in a lightbox, Ex:

    <a class="colorbox-url cboxElement" rel="gallery_119" href="...">
    <img width="750" height="746" src="..." class="attachment-full-width" alt="ab" data-wp-pid="268">
</a>

    It looks like the element class is being used to indicate the the link should be opened in a lightbox.

    A quick search on the JS reveals:

    $('.colorbox-url').live('click', function(){
    $.colorbox({href:$(this).attr('href'), open:true, maxWidth:'80%', maxHeight:'80%', fixed:true});
    return false;
});

    You can try adding the class to your link on the index page:

    <div class="front">
    <a href="<?php echo get_the_post_thumbnail($post->ID, 'large'); ?>" class="colorbox-url cboxElement">
        ...
    </a>
</div>

    Notice I also changed the href attribute to the image rather than the single post page. I just set the size to large, you may want a different image size.

    It’s hard to say whether or not that is sufficient to trigger the lightbox, the lightbox itself may require some initialization, but it should at least set you on the right path.