View Full Version : Using Fancy Box... need help styling links

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.


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!

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?

04-08-2014, 12:26 AM
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.

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. :)

04-08-2014, 04:24 AM
Back to original question- can anyone help me out?

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(){

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.

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?

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