CODEWITHSUNDEEP
javascriptjquerycssms-accesscoldfusion
Michael Downey
Michael Downey

Reputation: 687

Using Div's and .load to show images

How would I get this code to show an image? I was using iFrame's but was told if I ultimately want to link text with each picture that using Div's and .load would be better. I cant seem to get anything to load though using Div's.

......

This what I have now as of Dec 26, 2013

I have been able to incorporate all of the info I have learned so far. 

<!DOCTYPE html>
 <html>
    <cfquery datasource="AccessTest" name="qTest">
        SELECT Account, Image, Image_ID
        FROM PictureDB
    </cfquery>

SELECT Accounts, Remarks, Users, Image_ID FROM CommentPicture 

    <script src="http://code.jquery.com/jquery-2.0.3.js"> </script>

<script>
$(document).ready(function(){

    var images = {

    <cfloop query="qTest">
    "<cfoutput>#qTest.Image_ID#</cfoutput>": "<cfoutput>#qTest.Image#</cfoutput>",
    </cfloop>
    };

    $("button").click(function(event){
        event.preventDefault();
        var id = $(this).data("id");
        var src = images[id];

        $("#theImage").attr("src", src).removeClass("hide");

    });

});
</script>

<div id="div1">
    <h2>Display Image</h2>
</div>

    <cfoutput query="qTest">
        <button data-id="#qTest.Image_ID#">#qTest.Account# </button>
    </cfoutput>
    <img id="theImage" class="hide">
</html>

enter image description here enter image description here enter image description here

Upvotes: 1

Views: 178

Answers (2)

Kelly J Andrews
Kelly J Andrews

Reputation: 5111

.load() will load from a url info, but what you are trying to do is a simple .append() or .html().

That will add the image to your div.

Upvotes: 1

Sean Coyne
Sean Coyne

Reputation: 3884

You need to wrap the call to #qTest.image# in a <cfoutput></cfoutput>. Otherwise, CF wont process it.

<cfoutput>#qTest.image#</cfoutput>

Also, jQuery's load() method takes a URL and loads data from the server. It doesn't insert HTML.

You want something like

$("#div1").html('<img src="<cfoutput>#qTest.Image#</cfoutput>">');

Upvotes: 6

Related Questions