CODEWITHSUNDEEP
javascriptphpjquery
PimWillems
PimWillems

Reputation: 31

Load image into div, PHP and jQuery invloved

This is an assignment that I need to make to complete my PHP course in college. I've spent already the entire day on this, trying different things (ajax jquery loading for example). I'm fairly sure I need to head down the road I am currently on. The onclick in the a href works, I tried it with an alert I made into the script part. However, I can't figure out how I can load the image into the div photoHolder. This photoholder should contain the thumbnail I click on. Ofcourse it should be dynamic. So when I upload image and it created an automatic thumbnail, the original picture should be showed when I click the thumbnail. I also need to add comments and rating, but let's get this down first.

I surely hope, after all this is a site where I learned alot, that someone can help me.

The piece of PHP which has the onclick in the href:

foreach ($images as $image) {
    echo '<a href="#" onclick="makeBigger();"><img src="uploads/thumbs/', $image['album'], '/', $image['id'], '.', $image['ext'], '" title="Uploaded ', date('D M Y / H:i', $image['timestamp']), '" /></a> 


            [<a href="delete_image.php?image_id=', $image['id'], '">x</a>]';
    }
}
?>

    <div id="photoHolder"></div>`

This is the jQuery part located in my included header.php

    function makeBigger() {
           // This function needs to load the picture with a max width of
           // 300px into the "photoHolder" div located on view_album.php
    }

Ofcourse it's empty now, 'cause I wanted to start with a clean sheet.

If it's difficult to read, here is a Gist I made for you (#photoHolder is on line 30 of view_album.php)

Gist for you

EDIT If it wasn't clear: I need to load the bigger image, located in my uploads folder. This is an example link of how I load it in a new tab when clicking the thumb:

<a href="uploads/', $image['album'], '/', $image['id'], '.', $image['ext'], '"></a>

Upvotes: 1

Views: 3646

Answers (1)

Latheesan
Latheesan

Reputation: 24116

using jQuery (http://jquery.com/), you can solve it like this:

Add this between your <head></head> tags:

<script type="text/javascript" 
        src="http://code.jquery.com/jquery-1.10.2.js"></script>

replace this:

onclick="makeBigger();"

with this:

onclick="makeBigger(this);"

and here's the javascript function:

function makeBigger(imageLink)
{
    // get Image URL
    var imageUrl = $(imageLink).find('img').attr('src');

    // load big image
    $('photoHolder').html('<img src="'+imageUrl  +'" width="300" />');
}

EDIT : Alternatively, you could add replace:

<a href="#" onclick="makeBigger();">

with:

<a href="#" class="imageLink">

and your function would look like this:

$(document).ready(function()
{
    $('.imageLink').click(function()
    {
        // get Image URL
        var imageUrl = $(this).find('img').attr('src');

        // load big image
        $('photoHolder').html('<img src="'+ imageUrl  +'" width="300" />');
    });
});

Upvotes: 3

Related Questions