foreach loop and jQuery

Question

I have a PHP and a jQuery script that I use to display a few images. A large image on the left side and 4 thumbnails on the right side. Each time the user clicks an image-thumbnail it will show up on the large image placeholder on the left side.

This is the PHP code I'm using to display the large image and thumbnails:

<div class="pic"><img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->imageURL; ?>" />
</div>
<ul class="ngg-gallery-list-ir">
    <!-- Thumbnail list -->
    <?php foreach ( $images as $image ) : ?>
    <?php if ( $image->hidden ) continue; ?> 
    <li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
        <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" >
            <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
        </a>
    </li>
    <?php endforeach; ?>

This is the jQuery I'm using to update the large image when an user clicks on any thumbnail-image:

jQuery(document).ready(function($){

    // handle the click of thumbnail images
    // redirect it to change the main image
    $(".ngg-thumbnail-list a").click(function(){
        var src = $(this).attr("href");
        $(".ngg-galleryoverview-ir .pic img").attr("src", src);
        return false;
    });

    // preload the large images 
    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
        });
    }
    // populate the list of images to load
    preload(images);
});

Everything works fine in this setup but I also need to display below the main large-image its title and description. This is the code I'm using:

<div class="container-title-description">
    <div class="title"><?php echo $current->alttext ?></div>
    <div class="descripton"><?php echo $current->caption ?></div>
</div>

The problem is this: if I add this code inside the foreach loop I get the title and description below each thumbnail-image. If I add this code outside the foreach loop when the main image changes the title and description will stay the same. How can I solve this?

You can view how this setup looks like on this website.

Blazemonger · Accepted Answer · 2013-05-31 17:44:31Z

3

You already add the title and description as hidden title attributes inside the anchor element, so just extract them and update the HTML on demand:

$(".ngg-thumbnail-list a").click(function(){
    var src = $(this).attr("href"),
        desc = $(this).attr('title'),
        title = $(this).find('img').attr('title');
    $(".ngg-galleryoverview-ir .pic img").attr("src", src);
    $('.container-title-description .title').text(title);
    $('.container-title-description .description').text(desc);
    return false;
});

Initial HTML (outside your foreach loop):

<div class="container-title-description">
    <p class="title"></p>
    <p class="description"></p>
</div>

edited May 31, 2013 at 17:44

answered May 31, 2013 at 16:17

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

George Grigorita Over a year ago

You're right, using your code I got the title to show up but the description is still not displaying.

Blazemonger Over a year ago

I just noticed that in your HTML, 'description' is misspelled as 'descripton'. Will update my answer.

Collectives™ on Stack Overflow

foreach loop and jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related