Response title
This is preview!
Show/hide divs, Shadowbox compatibility? (Newbie)
in Using jQuery
•
12 years ago
Hello all,
I'm currently programming a website and we wanted to have Jquery on it. This is my first real foray into Jquery (other than occasionally using a plugin here and there) so I'm a bit confused as to why what is happening is happening.
The idea is to have 3 different things going on:
- At the top of the website we want rotating ads. When one of them is clicked, it opens a video file in Lightbox style (darkens the BG)
- 3 rotating banners below that, when clicked they just go to a website
- 3 more buttons with play buttons in the corners. When the play button is clicked, a video player takes over the button and plays the video.
So far I have the 2nd and 3rd one working. The video player works, the Jquery shows and hides the divs appropriately, and the rotating banners work great.
However I am having problems implementing a lightbox style onto the top banner.
I found a Jquery thing called Shadowbox but for the life of me I can't get it to play nice with the code I wrote for the show/hide div functionality for the video player.
You can see the website here:
If you click the play button on the latest news button, it will play a video. While the video is playing, click one of the banners at the very top of the screen (the ones that say Placeholder Ad). The video player will disappear and no shadowbox pops up.
Why is this? What am I doing wrong? I figure it's an ID issue; that shadowbox is applying some div replacement behavior to everything of a certain type, but I don't know how or where to fix it.
You can see the code in the HTML of the link, but here is the code for the Latest News box:
- <script type="text/javascript">
- $(document).ready(function(){
- $('#content1').hide();
- $('#layer_box a#click').click(function(){
- $('#content1').show('slow');
- $('#play_button').hide('slow');
- $('#layer_one').hide('slow');
- });
- $('#layer_box a#close').click(function(){
- $('#content1').hide('slow');
- $('#play_button').show('slow');
- $('#layer_one').show('slow');
- })
- });
- </script>
If anyone could help me get this working I would greatly appreciate it. I'd really like to learn why its breaking and how to fix it. Jquery is very powerful and I want to use it a lot in the future, I'm just not sure how to troubleshoot compatibility issues like this just yet.
Thanks for looking.
1