How to make two plugins work together: Awkward Showcase and Colorbox
I'm trying to invoke Colorbox from within a slide created by Awkward Showcase. Both plugins work if I put colorbox outside of the slideshow, but colorbox breaks when I put it in the slide show; I think I'm missing a simple piece related to ordering the functions or something (which is why I put in this forum instead of plugins).
I found this post on SO and tried to enclose the Colorbox code within it's own function but that breaks both pieces. Any help would be much appreciated. Here is the script code before I tried to implement the tip on SO that didn't work for me. I also tried moving
jQuery_1_5_2(".inline").colorbox({inline:true, width:"50%"});
after the .awShowcase function but that didn't help either.
I am using this on a site that points to the 1.3.2 library, hence the use of noConflict.
Thank you.
- <link rel="stylesheet" href="css/awkward.css" />
- <link rel="stylesheet" href="css/colorbox.css" />
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
- <script type="text/javascript" src="jquery.aw-showcase.js"></script>
- <script type="text/javascript" src="jquery.colorbox-min.js"></script>
- <script type="text/javascript">
- var jQuery_1_5_2 = jQuery.noConflict(true);
- jQuery_1_5_2(document).ready(function()
- {
- jQuery_1_5_2(".inline").colorbox({inline:true, width:"50%"});
- jQuery_1_5_2("#showcase").awShowcase(
- {
- content_width: 980,
- content_height: 425,
- fit_to_parent: false,
- auto: false,
- interval: 3000,
- continuous: false,
- loading: true,
- arrows: true,
- buttons: true,
- btn_numbers: true,
- keybord_keys: true,
- mousetrace: false,
- pauseonover: true,
- stoponclick: true,
- transition: 'hslide',
- transition_delay: 300,
- transition_speed: 500,
- show_caption: 'onhover',
- thumbnails: true,
- thumbnails_position: 'outside-last',
- thumbnails_direction: 'horizontal',
- thumbnails_slidex: 1,
- dynamic_height: false,
- speed_change: false,
- viewline: false
- });
- });
- </script>