The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

[solved] using colorbox for foxycart and for viewing full size photos

sunsurfsunsurf Member
in Bugs & Feature Requests edited June 2011
Hello,

Is it possible to use colorbox to show full size photos in my client's site when using foxycart (both on the same page)?

I am currently using slimbox2 to enlarge photos but love colorbox - and I'd really like to use it for photos as well as for the cart.

Do I need to include colorbox twice or can I use the foxycart theme (somehow minus the cart header / footer)?

Is there a trick to make it work?

Thanks in advance.
Comments
  • fc_adamfc_adam FoxyCart Team
    edited June 2011
    Hey sunsurf,

    You shouldn't need to include colorbox twice. Could you link me to the page where you're trying to use it for your own purposes?
  • sunsurfsunsurf Member
    edited June 2011
    hi fc_adam,

    ah I see - I literally just call colorbox for photos like in the demo on their website (and not include anything extra) - that is genius.
    <script>
    		$(document).ready(function(){
    			$("a[rel='example1']").colorbox({scalePhotos:"true", innerHeight:"80%"});
    		});
    	</script>
    

    How do I remove the continue shopping link on the bottom of the photo gallery colorbox only?

    (i still want it on the foxycart cart colorbox)

    Thanks fc_adam.
  • fc_adamfc_adam FoxyCart Team
    @sunsurf

    Ah ok, I see what's going on now. In my testing, it was working fine, but I wasn't customising the close button to be an image. So you could add this additional line to the javascript on your page template:
    <script type="text/javascript" charset="utf-8">
     var colorbox_width = "900px";
     var colorbox_height = "88%";
    var colorbox_close = "<span id="fc_close">&larr; Continue Shopping</span>";
    </script>
    

    And in your colorbox link, you can add this:
    <script type="text/javascript">
    $(document).ready(function(){
    $("a[rel='example1']").colorbox({scalePhotos:"true", innerHeight:"80%", close:"<span id="uo_close">Close</span>"});
    });
    </script>
    

    Then in your foxycart.css, instead of adding style to
    #cboxClose
    
    you'd style
    #cboxClose #fc_close
    
    and
    #cboxClose #uo_close
    
    .
  • hi fc_adam,

    That is brilliant - works perfectly.

    It wasn't working at first then I realised I needed single ' for surrounding span id's in the colorbox calls.

    Thanks again for all your amazing help!
  • I'm trying to accomplish the same. I've gotten it to work when I strip it down and do it on a plain html test page, but I can't seem to get it to work on the site without calling to colorbox twice, or by dynamically generating the gallery #. Appreciate any help!
  • fc_adamfc_adam FoxyCart Team
    @RodeoRamsey, could you link us to your store please?
  • Yes it's a testing server tho: http://sr.cowgirlexpressions.com/products/hairsuga/ ... I'm currently messing with the colorbox css so it may look weird at any given moment.
  • fc_adamfc_adam FoxyCart Team
    @RodeoRamsey, there are a few things going on with your page that you'll want to fix up, that should get it working for you.

    You're currently including jQuery on your page 3 times. You definitely only want that on there once (the very first one as shown in the page source should be fine).
    You're also including a second copy of colorbox.js on your page, which is probably messing things up a bit. The colorbox js is already included with your FoxyCart includes file, so it doesn't need to be included again.

    Try cleaning out those two things, and see how you go.
  • Thanks fc_adam. That's the problem. When I remove the 2nd colorbox.js, it doesn't work for the images. I'm sure it's the combo of too many js files but I'm not sure which ones to use.
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    @RodeoRamsey, by default FoxyShop uses PrettyPhoto for showing larger images in popups to completely avoid any collision with Colorbox. It looks like you might have stripped that out. Also, I'm still seeing three jQuery's on this page, some with different versions. That could be most of your problem right there. You should definitely be using at least 1.4.4 and preferably 1.5.2 or 1.6.2 as those are faster and avoid any potential IE colorbox issues.
  • Hi Sparkweb! Thanks, yes, I'm trying to remove the PrettyPhoto (tho I do love that) because I want a consistent "look" to the popups. When I remove the extra js files, that aren't automatically added by FoxyCart, the colorbox doesn't work.
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    Make sure you get rid of all the extra jQuery's... that's causing most of this not to work....
  • What does FoxyCart add? A stylesheet and a javascript file? Does it add the colorbox JS?
  • Well I think I have it now, but now I'm getting BOTH colorbox's opening on click. If you click a photo, you can see the shopping cart in the bg. If you click outside the photo, the cart becomes visible. If you click the X to close, they both close...
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    I don't exactly see both Colorboxes - but I do see a funny Close button. It looks like you are working on it, though, so I'll wait to see what you come up with.
  • fc_adamfc_adam FoxyCart Team
    edited July 2011
    @RodeoRamsey,

    I can't replicate having both the cart and the gallery colorboxes open at the same time either. Can you take a screenshot of what you're seeing?

    Also, as sparkweb mentioned, you'll really want to clean up the multiple jQuery calls, and I also just noticed you're including you're own copy of colorbox.js at the top of the page too. You'll need to remove that one too. in the foxycart.complete.3.js file, it already includes the colorbox javascript for you, so you don't need to include it yourself.
  • Ok I'm back working on this. I feel like I take 1 step forward and then 2 back. I *was* happy with this, save ONE thing: The "close" button/link on the PHOTO colorbox... I wanted to move it... but then I noticed I'm back to seeing both the photo colorbox AND the checkout colorbox popup at the same time.... I will stop working on it now and see if anyone else can see this. http://sr.cowgirlexpressions.com/products/hairsuga/
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    I see it now. You've still got multiple jQuery libraries (different versions) and colorboxes showing up. Remove this from your header:
    <!-- Scripts -->
    <!-- <script type="text/javascript" src="/js/jquery.1.4.2.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>;
    
    <script type="text/javascript" src="http://sr.cowgirlexpressions.com/wp-content/themes/sugarein/js/jquery.colorbox.js"></script>;
    
  • Ok, removed all of that.... now the checkout colorbox works, but not the images....
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    Why don't you try adding this to the bottom of foxyshop-single-product.php as a starter. This should initialize colorbox for the image links.
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	$('.imagecol a').colorbox();
    });
    </script>
    

    If that works (or do some playing with it) then you can customize this particular implementation of colorbox by passing in some vars a la http://colorpowered.com/colorbox/
Sign In or Register to comment.