jQuery instead of Prototype

On this page you will find how to add jQuery library to your ImpressPages CMS website and change lightbox from default to ColorBox (it's only as an example). If you plan to use jQuery for menu or other tasks, you need to follow these steps too.

1 Step - remove Prototype library

Remove this line from head of main.php file in your theme.

<link rel="stylesheet" href="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/css/lightbox.css" type="text/css" media="screen" />

Remove these lines from bottom of main.php file:

<!-- popups -->
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/lightbox.js"></script>
<script type="text/javascript">
  // <![CDATA[
  LightboxOptions.fileLoadingImage = '<?php echo BASE_URL.LIBRARY_DIR; ?>' + 'js/lightbox/images/loading.gif';
  LightboxOptions.fileBottomNavCloseImage = '<?php echo BASE_URL.LIBRARY_DIR; ?>' + 'js/lightbox/images/closelabel.gif';
  //]]>
</script>
<!-- popups -->

2 step - add jQuery and Fancybox files

Download this archive and extract it to your theme folder ip_themes/ip_default.

jQuery lightbox (.zip)

Final tree should look like this (ip_themes/ip_default):

fancybox
- ...
- many many files
- ...

...
main.php
...
prototype.js
...

3 step - include required files into template

Add these lines in <head> section of main.php file.

<link href="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/jquery/jquery.js"></script>
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/prototype.js"></script>
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.fancybox-1.3.4.js"></script>
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="<?php echo BASE_URL.THEME_DIR.THEME; ?>/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("a[rel^=lightbox]").addClass('jquery-lightbox'); //add class for jQuery
  $("a[rel^=lightbox]").attr('rel', ''); //remove unnecesary rel atribute
  $("a.jquery-lightbox").fancybox({
    'titlePosition' : 'over',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
      return '<span id="fancybox-title-over">' + (currentIndex + 1)
          + ' / ' + currentArray.length + ' ' + title + '</span>';
    }
  });
});
</script>

Why do I need to add prototype.js?

Some prototype library functions are used in the core of ImpressPages CMS. That's why you need to use this file. By the way, new prototype.js is changed to not conflict with jQuery.

Managed text blocks »

Write a comment

You must be logged in to comment.