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
- <?php
- /*
- Template Name: Gallery Page
- */
- ?>
- <?php get_header(); ?>
-
-
-
- <?php
-
- // check if the repeater field has rows of data
- if( have_rows('category_gallery') ):
- // loop through the rows of data
- while ( have_rows('category_gallery') ) : the_row();
- // display a sub field value
- $image = get_sub_field('cat_image');
- $title = get_sub_field('cat_title');
- ?>
-
- <a href="<?php echo $image['url']; ?>" data-lightbox="group1" width="220" height="180">
- <img class="responsive1" src="<?php echo $image['url']; ?>" data-lightbox="<?php echo $image['url']; ?>">
- </a>
-
-
-
- <?php
- endwhile;
- else :
- // no rows found
- endif;
-
-
-
- ?>
-
-
- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
- <script>
- $(document).ready(function() {
- $(".responsive1").bind("click", function() {
-
-
- $(".lb-nav", this).append("<div class='imgTitle'><?php echo $title ?></div>");
- });
- });
-
-
-
-
- </script>
-
- <div class="spacing"></div>
-
- <?php get_footer(); ?>