Forums

How to add my own pop up dialog box with some jquery code

Permalink
I want to add some of popup image gallery with using my own coding without adding an addon. So I added my jquery imports sperately in header file. But didn't work.I Added Like this in header file,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/fancybox/video.js"></script>

But I it didnt work.
What is the solution. Please give me a help.

In other way,
I want to add this fancy box gallery without using an addon
http://fancybox.net/

How can I do that?
 
juliandale replied on at Permalink Reply
juliandale
The first thing to do is to remove that first line, as Concrete5 already includes JQuery. Adding the JQuery file twice will mess it up.

The second thing is to ensure that the code you have is placed after the line <?php Loader::element('header_required'); ?>

The third thing is to ensure that you have the fancybox files placed in the correct folder. I'd assume that there will be a bunch of images to go with it, and you might have to update the paths to those images within the css file.

Your code within the HEAD section of your theme should look like this:
<?php Loader::element('header_required'); ?>   
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath(); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/fancybox/video.js"></script>


Once you have got everything in the right place, the fourth thing is to use JQuery to add the click event to fire up the fancybox when clicking on something. I would use a class called fancybox to keep it simple.

So, add this to your HEAD section (beneath the code above):
<script type="text/javascript">
$(document).ready(function() {
  $("a.fancybox").fancybox();
});
</script>


Then add the fancybox class to links from your small images to your large images, something like this:
<a class="fancybox" href="images/big_image.jpg"><img src="images/small_image.jpg" alt=""/></a>
<a class="fancybox" href="images/another_big_image.jpg"><img src="images/another_small_image.jpg" alt=""/></a>


Remember also that the fancybox won't work until your page has completely finished loading.