• So far I have a loop that separates post image and text to their own divs. The goal is to have a just simple photo gallery showing the post list with thumbnails, short text and opening the thumbnail to larger picture with lightbox. Problem is that the images open to a new window, you know the standard procedure.

    I use the lightbox from here: https://www.huddletogether.com/projects/lightbox2/
    Uploaded the files to my server and included the <script>’s to the header

    The loop:

    <div class="post">
     			<!-- Start the Loop. -->
        		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                   <div id="content"> 
    
                        <div id="postImage">
    
                            <?php
    
                            //assign content
                            $content = get_the_content();
                            global $post;
                            $post_id = $post->ID;
    
                            //scrap image with links
                            preg_match_all("/<a href=\"(.*)\">(<img [^>]*>)<\/a>/",$content,$matches,PREG_PATTERN_ORDER);
    
                            //count number of images scraped.
                            $count = count($matches);
    
                            //echo out using for loop
                            for($i=0;$i<$count;$i++){
                                 $match = $matches[0][$i];
                                 $rel =  "<a rel='lightbox[photos]'";
                                 $image = str_replace('<a',$rel,$match);
                                 echo($image);
                            }
                            ?>
    
                        </div> 
    
                        <div id="postText">
                          <?php
                          ob_start();
                          the_content('Read the full post',true);
                          $postOutput = preg_replace('/<img[^>]+./','', ob_get_contents());
                          ob_end_clean();
                          echo $postOutput;
                          ?>
                        </div>
    
                   </div>
       			 <?php endwhile; ?>
                 	<div id="archiveNav" class="navigation">
                    	<span class="previous-entries"><?php next_posts_link('Older Entries')?></span>
                    	<span class="next-entries"><?php previous_posts_link('Newer Entries')?></span>
                	</div>
    			<?php else: ?>
        			<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
        		<?php endif; ?>
       		</div>

    This produces this:

    <a rel='lightbox[photos]' href="https://www.mysite.com/wp-content/uploads/2011/05/wv_121.jpg"><img class="alignnone size-thumbnail wp-image-182" title="wv_121" src="https://www.mysite.com/wp-content/uploads/2011/05/wv_121-150x150.jpg" alt="" width="150" height="150" /></a>

    It looks ok, though I’m such a noob.

    Anyone?!

  • The topic ‘Images open to new window despite lightbox 2’ is closed to new replies.