prettyPhoto in Expression Engine

Question

Right, i've looked around and can't seem to find an answer to this problem.

I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:

    <a href="#maphelp" class="prettyPhoto">Need Help?&nbsp;<i class="icon-help-circle"></i></a><div id="maphelp" class="hide">text goes in here</div>

But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.

I have also done the fix within the help pages to make sure that its is active. Still nothing happens...

Can anyone help me?

Answer 1

Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer. I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so

<script src="{path="embeds/jsfile"}"></script> 

this way it allows me to move the files all over the place in my visual template.

another is to use the no conflict

<script type="text/javascript">
  $.noConflict();
 // Code that uses other library's $ can follow here.
 </script>

I hope this helps.