How to add content in a div using jquery

How to add content in a div using jquery

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(); ?>