CODEWITHSUNDEEP
javascriptjquery
michaelmcgurk
michaelmcgurk

Reputation: 6509

Toggle an Image on Click

I'm trying to toggle an image on Click. It's partially working but also partially not :'(
Demo: http://jsfiddle.net/Tqwdh/4/.

When I click the large image, the smaller image changes (from 50x50 to 151x151) - hurrah!

But when I click the 'Read more' text, the small image remains the same image. The small, nested image needs to change when I click the 'Read more' text.

Can anyone show me how I can resolve this?

I've attached my jQuery:

$(function(){
        // The height of the content block when it's not expanded
        var adjustheight = 130;
        // The "more" link text
        var moreText = "Click to read more...";
        // The "less" link text
        var lessText = "Click to read less...";
        // Sets the .more-block div to the specified height and hides any content that overflows
        $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
        // The section added to the bottom of the "more-less" div
        $(".more-less").append('<p style="display:block;margin-top:8px"><a href="#" class="adjust"></a></p>');
        $("a.adjust").text(moreText);
        $(".adjust").toggle(function() {
                $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
                // Hide the [...] when expanded
                $(this).parents("div:first").find("p.continued").css('display', 'none');
                $(this).text(lessText);
            }, function() {
                $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
                $(this).parents("div:first").find("p.continued").css('display', 'block');
                $(this).text(moreText);
        });
        });

        $(function(){
            $('img').click(function(){
                $(this).closest('article').find('.adjust').click();
            });
        });

        $(function(){ 
           $("article").click(function(){ 
           $("img.small").attr('src',  
                        ($("img.small").attr('src') == 'http://placehold.it/50x50'  
                    ? 'http://placehold.it/151x151'  
                    : 'http://placehold.it/50x50' 
                             ) 
                        )  
            }); 
        });

and my HTML:

<article id="post-5" >

            <div class="more-less">    
                <div class="more-block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam purus, lacinia eget placerat sit amet, bibendum nec nisl. Curabitur a mattis ipsum. Praesent quis nisi in purus malesuada rhoncus. Pellentesque ut quam eget libero congue lobortis. Nunc sed quam ac erat lobortis eleifend. Donec elementum sodales cursus. Aliquam porttitor massa nisi, in laoreet turpis. Sed consequat condimentum lorem ut dignissim. Sed hendrerit mauris ut massa fermentum laoreet. Pellentesque a leo vitae enim dictum lobortis. Praesent commodo feugiat velit iaculis malesuada.</p>
                    <p>Praesent sem lectus, ullamcorper eget ullamcorper a, congue vel nisl. Nullam volutpat leo vel dui venenatis dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac scelerisque lorem. Ut blandit magna eu turpis posuere gravida. Fusce egestas risus in libero ullamcorper sagittis. Vestibulum molestie metus vitae quam dignissim consequat. Vivamus id tellus id lorem consectetur iaculis sit amet interdum ante. Quisque lacinia tellus id mi tincidunt fermentum dignissim velit laoreet. Quisque scelerisque nunc iaculis nisi varius ultrices.</p>
                    <p>Phasellus id elit ac lacus faucibus ullamcorper. Etiam ullamcorper pretium tellus, ut pharetra ante pulvinar vel. Sed neque diam, semper vel rhoncus non, congue ut sapien. Integer a mi eget libero elementum lobortis. Donec hendrerit egestas ligula sit amet eleifend. Curabitur pharetra venenatis tempor. Quisque pulvinar malesuada justo, ut euismod arcu pharetra vitae. Cras lobortis, ligula id euismod euismod, ipsum risus varius urna, faucibus gravida lectus mi nec nulla. Fusce eleifend fringilla nibh ut vulputate. Vivamus sagittis leo metus. Etiam facilisis convallis lacus adipiscing hendrerit. Duis ultricies euismod libero, nec blandit est semper a. Phasellus sit amet justo sed quam elementum lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>

            <p>
                <img src="http://placehold.it/50x50" class="small" style="position:absolute;margin-left: 240px;margin-top: 127px;" />
                <a href="#" title="News Item 1"><img src="http://placehold.it/300x187" alt="News Item 1" width="300" height="187" /></a>
            </p>            

        </article>

Many thanks for any pointers.

Upvotes: 0

Views: 184

Answers (2)

painotpi
painotpi

Reputation: 6996

So, if I have understood you correctly, all you've got to do is,

Change this

$("article").click(function() {
        //your code here
    });

to,

$("article, .adjust").click(function() {
        //your code here
    });

Check the fiddle here

EDIT:

Changed a couple of things to match what you needed,

1) Change this, 

$(this).parents('article').find('.adjust').click();

to,

$(this).parents('article').find('.adjust').trigger('click');

as the latter is a proper way to trigger an event.

2) Change in the image swap function,

$("article, .adjust").click(function() {
    /*Save references in variables*/
    var imgToSwap = $(this).parents("article").find("img.small");
    var img_small = 'http://placehold.it/50x50';
    var img_large = 'http://placehold.it/151x151';

    imgToSwap.attr('src', (imgToSwap.attr('src') ==  img_small ? img_large : img_small));
});

Using $(this) will help you get the image in the right context.

Check the fiddle test here

Upvotes: 1

Vivian River
Vivian River

Reputation: 32390

It looks like you have a few problems here. I don't see that you've applied the adjust class to any element in your HTML. I also see that CSS is applied directly in JavaScript. (Why not use a .css file?)

This part of the code looks very nice:

$("img.small").attr('src',  
    ($("img.small").attr('src') == 'http://placehold.it/50x50'  
    ? 'http://placehold.it/151x151'  
    : 'http://placehold.it/50x50' ))

This is good use of the ternary operator.

My I suggest that you use this code as the click handler on a.adjust, assuming that the link that expands the image is supposed to be decorated with the adjust class?

var changeImage = function() {
    $("img.small").attr('src',  
    ($("img.small").attr('src') == 'http://placehold.it/50x50'  
    ? 'http://placehold.it/151x151'  
    : 'http://placehold.it/50x50' ))
});
$('a.adjust').click(changeImage);
$('article').click(changeImage);

I hope this helps. If the question were written more precisely, it might be helpful.

Upvotes: 0

Related Questions