jQuery Forum

Hello
I am experimenting an issue using jquery to create come content to be displayed inside a div. I am using the plugin Lightbox for photogallery. Lightbox display a large image , once clicked on a thumb, that is not part of the original html dom where the thumb is placed, so is getting a bit tricky for me that i am learning jquery.

I have a $title variable to be shown inside a div that contains an image. the title is related to any image I have in the gfallery.
this is my php page that i created to display the gallery, but i have an issue ' as it does not display the div that contains the title. Instead, if I take off the "this" from the $(".lb-nav", this) it displays the title repeatedly, appending everytime all the titles of the gallery thumbs in a single large image.
this is the gallery link
http://www.paolobergomi.it/new-gallery/outdoor-portraits/
thanks in advance for all the suggestions

Paolo

1. <?php
2. /*
3. Template Name: Gallery Page
4. */
5. ?>
6. <?php get_header(); ?>
7.  
8.                
9.    
10.          <?php
11.                
12.                 // check if the repeater field has rows of data
13.                 if( have_rows('category_gallery') ):
14.                   // loop through the rows of data
15.                     while ( have_rows('category_gallery') ) : the_row();
16.                         // display a sub field value
17.                       $image = get_sub_field('cat_image');
18.                       $title = get_sub_field('cat_title');
19.         ?>    
20.                        
21.                       <a href="<?php echo $image['url']; ?>" data-lightbox="group1" width="220" height="180">
22.                         <img class="responsive1" src="<?php echo $image['url']; ?>" data-lightbox="<?php echo $image['url']; ?>">
23.                       </a>
24.                       
25.                    
26.                     
27.         <?php
28.                 endwhile;
29.                     else :
30.                     // no rows found
31.                     endif;
32.                
33.               
34.                
35.         ?>
36.           
37.      
38.                    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
39.                         <script>
40.                               $(document).ready(function() {
41.                                 $(".responsive1").bind("click", function() {
42.                             
43.                               
44.                                     $(".lb-nav", this).append("<div class='imgTitle'><?php echo $title ?></div>");
45.                                   }); 
46.                               });    
47.                                   
48.                                    
49.                                 
50.            
51.                       </script> 
52.  
53.  <div class="spacing"></div>
54.  
55. <?php get_footer(); ?>