Thanks for commenting,
Laura

Sorry its taken me a bit of time to get back to you.

The code is simply set to display the content within the div with a class of pop-up:

<div class=”pop-up”>
<p>
<strong>Name:</strong> Person 1<br />
<strong>Age:</strong> 23<br />
<strong>Location:</strong> Canada
</p>
</div>

So quite simply you should just be able to change the code within the div tags:

<div class=”pop-up”>
<p>
My custom text.
</p>
</div>
…
<div class=”pop-up”>
<img src=”pic.jpg” alt=”My image” />
</div>

You could also add another class so that the boxes could be styled differently, e.g. a different background colour.

<div class=”pop-up blue-bg”>
<p>
<strong>Name:</strong> Person 1<br />
<strong>Age:</strong> 23<br />
<strong>Location:</strong> Canada
</p>
</div>

Hope this answers your question.

Thanks,
Laura

This code is really only good for individual pop-ups. That’s why after some comment requests I developed the updated code which is designed to handle more than one pop-up from the same code. That’s what code I’d look at if I were you because it sounds perfect for what you are trying to achieve.

Let me know how you get on,
Laura

Just realised i posted this on the multiple popup page, where im guessing it doesn’t make sense…. i followed this guide

.How would i adapt this tutorial to make each popup unique with its own content….As a newbie to the developer world any help would be appreciated

Nice tutorial….How would i adapt this tutorial to make each popup unique with its own content….As a newbie to the developer world any help would be appreciated

Excellent Tutorial, for a novice like me, very easy to understand, so a big thanks… I have a similar issue to one that has been mentioned but wanted to clarify something… I want to use the popup for a list of contacts( so use the popups multiple times), if I use the previosuly suggested answer of trigger-1 Popup-1 , trigger-2 popup-2 , are there any alterations to the Jquery that need to be made..?

I live on the west side of Michigan about 20 minutes from Grand Rapids and 30 minutes from the beach. I love it here, the winters can be long, but I love the seasons. I have two wonderful, energetic boys, Nate 9 and Zach 6. They are my constant inspiration. I am the owner of Cocoa Daisy and love it! The hours are long but the commute (down the stairs to my office) is short!
I have been scrapbooking for about 12 years and have had layouts and mini albums published in various magazines and idea books. I have been a Creating Keepsakes HOF honorable mention twice and became a Memory Makers Master in 2009.
My schooling and background are in fine arts and graphic design, this tends to come through in my scrapbooking style: bold and graphic with a touch of whimsy. I love to have all the elements on a layout support it’s theme in some way, and to draw people in and have them take a minute to discover all the little details. My journaling is always honest and from my heart.
Being artistic is a driving force in my life – I have to do something creative everyday, whether it’s gardening, decorating, sewing or scrapbooking! I am very excited to be a part of the Cocoa Daisy Design Team and hope that I can inspire you!

Thanks for commenting. Yes this is certainly achievable – Firstly, I’d recommend using the updated version of the code: http://creativeindividual.co.uk/2011/08/create-multiple-pop-up-divs-using-the-jquery-prev-method/

Next you’ll need to make the pop-up a trigger as well, so that it stays open when your mouse is over it. You’ll probably also need to position the pop-up box closer the the trigger element – so that your mouse can move to it without it disappearing again. After that, you can put whatever you like into the div, a link, an image, a tool-tip, etc.

I haven’t tried it myself but I think if you use the updated code, you’ll just need to add the pop-up div as a trigger. So the code becomes:

$(document).ready(function() {
//If Javascript is running, change css on product-description to display:block
//then hide the div, ready to animate
$(“div.pop-up”).css({‘display’:'block’,'opacity’:’0′})

$(“a.trigger”).hover(
function () {
$(this).prev().stop().animate({
opacity: 1
}, 500);
},
function () {
$(this).prev().stop().animate({
opacity: 0
}, 200);
}
)

$(“div.pop-up”).hover(
function () {
$(this).stop().animate({
opacity: 1
}, 500);
},
function () {
$(this).stop().animate({
opacity: 0
}, 200);
}
)
});

Notice that I’ve removed .prev() from the pop-up hover code.

As I said, I haven’t tried it myself so I can’t guarantee that this is the best way to do it but should give you a good starting point.

Good Luck,
Laura