Image preview

JenniferLong · October 2010

I am trying to do an image preview in one of our surveys. I would like to do the one from http://cssglobe.com/lab/tooltip/02/, but what I have is not working.

St. Joseph's Indian School 34th Annual Powwow 

I am interested in the American Indian Day celebration events, which occur on September 17-18, 2010.

Any help would be appreciated!

Thanks!

Noah Cooper · October 2010

Could you share a link to your page?

JenniferLong · October 2010

Noah Cooper:
Could you share a link to your page?

http://www.stjo.org/site/Survey?SURVEY_ID=1900&ACTION_REQUIRED=URI_ACTION_USER_REQUESTS

Here you go...thank you!!

Noah Cooper · October 2010

JenniferLong :
http://www.stjo.org/site/Survey?SURVEY_ID=1900&ACTION_REQUIRED=URI_ACTION_USER_REQUESTS

Here you go...thank you!!

The reason this is not working on your site is that you have not included the jQuery library or the JavaScript file from http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery. You'll need to download the ZIP file on that page, and upload jQuery and the JavaScript file (main.js) to your site, then reference them on your page.

JenniferLong · October 2010

Noah Cooper:
The reason this is not working on your site is that you have not included the jQuery library or the JavaScript file from http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery. You'll need to download the ZIP file on that page, and upload jQuery and the JavaScript file (main.js) to your site, then reference them on your page.

Got it to work. Thank you, Noah!

Noah Cooper · October 2010

JenniferLong :
Got it to work. Thank you, Noah!

Two issues:

1) Looks like you have the wrong version of main.js. Try downloading the version at http://cssglobe.com/lab/tooltip/02/main.js and uploading that to your site.

2) You need to add the styles for the "tooltip". Here's what's on http://cssglobe.com/lab/tooltip/02/ ...



<style type="text/css">
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>

JenniferLong · October 2010

Noah Cooper:
Two issues:

1) Looks like you have the wrong version of main.js. Try downloading the version at http://cssglobe.com/lab/tooltip/02/main.js and uploading that to your site.

2) You need to add the styles for the "tooltip". Here's what's on http://cssglobe.com/lab/tooltip/02/ ...
<style type="text/css">
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>

Wow, that looks so much better. Thank you very much for helping me!!!

Image preview

Comments

Categories