Home/ Questions/Q 8507127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T02:46:50+00:00

I have a function in jquery which displays images on link click and also

  • 0

I have a function in jquery which displays images on link click and also has to hide the image when the link is clicked again.

This is the code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j('.links').click( function(){
        var linkclicked = this.id;
        var url = $j(this).attr('href'),
        image = new Image();

        image.src = url;
        image.onload = function () {
              $j('#image-holder'+linkclicked).empty().append(image);
            /* The above line shows the image on first click.
               Adding slideToggle hides the image again  */
            };
            image.onerror = function () {
                $j('#image-holder'+linkclicked).empty()
                                .html('That image is not available.');
            }
            $j('#image-holder'+linkclicked).empty().html('Loading...');
            return false;
        });
    }); 
function loadnow() {

}
</script>
</head>
<body>
<?php $topicid=1; ?>
<a href="myimages/red-brick-wall-texture.jpg" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
<?php $topicid=2; ?>
<br><a href="/myimages/gymicon.JPG" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
</body>
</html>

Please let me know where to write slideToggle as to enable show/hide function properly. There are two links here which show separate images. They are shown when clicked but the problem is to hide them on next click and make them
visible when clicked again and so on.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way you have your code here is not really quite right for .slideToggle. You should not put the URL for the image in the href attribute of an <a> element because the link will try to go there on click.

    The way .slideToggle works is well documented on the docs page. All you have to do is use the HTML <img> tag, which is made to hold images. Then you $().hide(); them when the page loads so they aren’t shown. All you have to do them is call the .slideToggle() function on the link click event.

    See the working example with some misc pictures in this fiddle: http://jsfiddle.net/8xcZT/5/.

    Or here is a working version of your code: http://jsfiddle.net/JMXba/9/. I can see this may be desirable to wait for the click to load the image.

    Good Luck!

    • 0