Solved

add image within div

Posted on 2014-04-14
6
251 Views
Last Modified: 2014-04-29
this is how I want it to appear in my view.
<span class="stack88">
<div class="stack" id="stack">
<img stack="true" src="ImgN/myimage.jpg">
</div></span>

Open in new window


 also if I have multiply images then the div must stay the same
<span class="stack88">
<div class="stack" id="stack">
<img stack="true" src="ImgN/myimage.jpg">
<img stack="true" src="ImgN/myimage1.jpg">
<img stack="true" src="ImgN/myimage2.jpg">
</div></span>

 success: function (listItems) {
                            $.each(listItems, function () {
                            $(".stack88 img:last-child").remove()  // Remove last image before load.

                            $(".stack88").append($("<img>",
                            {
                                stack: "true",
                                src: "ImgN/" + this.myimage
                                
                            }));
                           
                        });

Open in new window

0
Comment
Question by:sevensnake77
  • 4
  • 2
6 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39999537
What exactly is the problem you're having, and what is the html you're starting out with.

I think you should be appending the <img> to the #stack DIV, not the .stack88 SPAN. It also doesn't make sense to remove the last image and then append a new one - each time the loop runs it will remove the image it's just appended! If you want to remove the image before adding the new ones, then remove it before the loop:

$("#stack img:last-child").remove();
$.each(listItems, function () {
   $("#stack").append($("<img>", {
      stack: "true",
      src: "ImgN/" + this.myimage                                
   }));
});

Open in new window

It does depend on the data contained in listItems, so we may be able to help more if we see that.
0
 
LVL 9

Author Comment

by:sevensnake77
ID: 39999887
Its not going to work with that. Not for what I am trying to do. I need to to function the div then image then the closing div.  any other ideas my friend.
0
 
LVL 9

Author Comment

by:sevensnake77
ID: 39999911
Ok that will work.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 9

Author Comment

by:sevensnake77
ID: 39999939
Ok that will work but let me explain the big picture and maybe you can guide me to the correct path.  

I am using a gallery.  if the image is static it loads correctly. when the css loads when I try to dynamically load the image onclick I need to the image and the css to appear. I guess it does not load correctly using onclick only when it first loads to the DOM. Need a work around, what do you think.?

<div id="stack" class="stack" style="background-image: url("images/backtexture.png"); background-color: transparent; width: 900px; height: 900px; float: none;">
<img src="ImgN/myimage.jpg" stack="true" style="width: 600px; height: 750px; z-index: 0; left: 331.5px; top: 189px; border: 5px solid rgb(255, 255, 255); box-shadow: 0px 0px 5px rgb(85, 85, 85);">
<div id="stackstkzoom" class="zoom" style="background-image: url("images/slidrogallery/nav/small/zoom.png"); left: 884.933px; top: 202.433px; z-index: 500;"> </div>
<p id="stackstkcaption0" class="stkcaption" style="margin-top: 0px; left: 336.5px; top: 874px; width: 600px; height: 70px; z-index: 999; display: none;">
<div id="stackstkrightarrow" class="stkrightarrow" style="z-index: 1800; background-image: url("images/slidrogallery/nav/small/right.png"); left: 966.5px; top: 514px;"> </div>
<div id="stackstkleftarrow" class="stkleftarrow" style="z-index: 1800; background-image: url("images/slidrogallery/nav/small/left.png"); left: 246.5px; top: 514px;"> </div>
<div id="stackstkzoom" class="zoom"> </div>
<p id="stackstkcaption0" class="stkcaption">
<span style="color: rgb(255, 255, 255); font-size: 1em; left: 300px; top: 35px;"> </span>
</p>

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40000458
Sorry, you've lost me - can't really figure out what you're trying to do? Can you try and explain again what you need.
0
 
LVL 9

Author Closing Comment

by:sevensnake77
ID: 40030500
tks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now