Jump to content
Sign in to follow this  
euphie

How to implement jQuery for boxes

Recommended Posts

euphie

I'm sure this question has been asked a lot but I can't seem to find the correct answer. I'm trying to add an image rollover for my boxes to show captions for the picture. It's just a rollover that will show a transparent box about a quarter of the picture. I'm comfortable with HTML and CSS but I'm a beginner when it comes to JavaScript and jQuery. This link shows the jquery plugin of what I need. How would I go about implementing this? http://buildinternet.com/project/mosaic/ Thank you...

Share this post


Link to post
Share on other sites
catrina
Are you adding these images (intended for the rollovers) directly in the HTML/Visual Editor for the Boxes? The jQuery files that come with that plugin would have to be uploaded to your site directory first and then you'll need to follow the instructions provided with the plugin.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
euphie
Thank you for responding. I'm uploading the image under the Boxes Setup Options. Please correct me if I'm wrong...So I should put the .js file into my site directory and call it form the HTML/Visual Editor for the box? Do I also add the captions for the rollover here as well? I know I can add the css directly in the Pagelines settings for custom CSS. Thanks...

Share this post


Link to post
Share on other sites
catrina
Yes, the .jf file should go into your site directory and should be called using a script that you place in Custom Code > Headerscripts. Do the instructions for this plugin provide you with that script?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
euphie
Yes I believe they do. They provide two different ones: So I'll give it a try tomorrow. I'll toss both of those into the headerscripts. I'll let you know the results. Thanks!

Share this post


Link to post
Share on other sites
euphie
I tried my best to work with this jQuery for the boxes by putting the image in the visual editor instead of the Box Option upload...and everything came out to be a mess. In the end, I don't think I want to go this route. Is there another way I can accomplish this through css and html? Right now i'm using a CSS hover opacity to change the picture...but is there a way to enter content as well? I'm just trying to show the details of the image once someone hover their mouse over it.

Share this post


Link to post
Share on other sites
euphie
I was able to accomplish with this tutorial. http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/ Thanks for the help :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×