View Full Version : Using Fancy Box... need help styling links
apriljoanne
04-07-2014, 11:45 PM
I understand basic HTML codes but I'm not great at it... anyway, I have a website I am trying to get a link to pop-up within the window, which I have successfully been able to do with Fancybox. But since it's using the fancybox class, it's overriding the styling for the links in that section.
Here's my live demo: aprilwraps.com/test.html
It's toward the bottom of the page, the first box and image with Nikki where it says "Read More" is the styling I want on the second box and image link. That link is working with the inner window, just not the styling I want.
Basically:
5416
I don't want to have to set it individually for each link, I just don't understand where to edit in the fancybox script for it to have that styling. I'm not very familiar with javascript.
I hope that makes sense. :) Please help me!
apriljoanne
04-08-2014, 12:01 AM
I installed a fancybox script on my site so I could have a frame pop-up within the page. But now that the script is in I can't style the links anymore to match the rest of the site. Also, I just noticed that my script for the slider at the top of my page (was a banner taht would cycle thru images) is no longer working.
I posted a link in my first post but I think the post was removed and maybe that's why... so I'm going to ask my question again without the link.
Can anyone help me?
Your original post (this one too) was automatically moderated by the forum's anti-spam software. It happens once-in-a-while; just be patient. I've approved both posts and combined them into this single thread.
apriljoanne
04-08-2014, 12:50 AM
got it! Thanks I'm trying to work around my baby's schedule so was in a hurry to get it done. Sorry, I will try to be more patient next time. :)
apriljoanne
04-08-2014, 04:24 AM
Back to original question- can anyone help me out?
Beverleyh
04-08-2014, 08:01 AM
Looking a the other links/buttons, it just looks like you've removed the class of "button" from the link when you added the fancybox classes - put that back in and the styling returns.
As for the slider script not working anymore, the first thing I notice is that you're loading 2 jQuery libraries, which might be conflicting - you only need one, so take one.
I'd also move all the links to external JavaScript files up above the $(document).ready(function(){ part(s).
Also try condensing both script calls, for slider and fancybox into one $(document).ready(function(){
apriljoanne
04-08-2014, 11:58 PM
Thank you, I will try that! So I can have both the button and fancybox class? I've never had 2 on the same tag so wasn't sure.
apriljoanne
04-09-2014, 12:18 AM
so I tried adding the button class back in but I can only have one class attribute and the link doesn't work right without the fancybox one. Is there a way to add the attributes into the fancybox script itself?
Beverleyh
04-09-2014, 05:42 AM
Yes you can only have one class attribute to an element, but within it you can add multiple classes separated with a space. The example provided by fancybox is an example of this, so just add your button class in there too: http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.