Login

02-12-2008, 08:32 AM

[eluser]skewbie74[/eluser]
Hi

Forgive me, I do not know whether this is a Code Igniter issue, a FreakAuth Light issue or a LightBox2 problem Smile

I am using CI with FAL as the authentication system and now I want to use LightBox to view my images. I have added the required .js & .css files in my header.php for LightBox but when I click on an image it just works like a normal URL and goes straight to the folder with the images in it (public/frontend/images/construction/big/imagename.jpg) rather than opening with LightBox.

Here is an example of the picture links (I am going to put it in a loop in the view but have hard coded it for now):

Code:
<div class="photo">

<a href="&lt;?=base_url().$this->config->item('FAL_assets_front')?&gt;/images/construction/big/01-Before It All Began-1.jpg" rel="lightbox[construction]" title="Before It All Began">

<img src="&lt;?=base_url().$this->config->item('FAL_assets_front')?&gt;/images/construction/thumb/01.JPG" />

        </a>

<div id="description">Before It All Began</div>

Here is my header:

Code:
&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/&gt;

&lt;title&gt;&lt;?=$this->config->item('FAL_website_name')?&gt;&lt;/title&gt;

&lt;link href="&lt;?=base_url().$this-&gt;config->item('FAL_assets_front').'/'.$this->config->item('FAL_css');?&gt;/fal_style.css" rel="stylesheet" type="text/css" />

&lt;link href="&lt;?=base_url().$this-&gt;config->item('FAL_assets_front').'/'.$this->config->item('FAL_css');?&gt;/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

config->item('FAL_assets_shared').'/'.$this->config->item('FAL_js');?&gt;/jquery.js" type="text/javascript">

config->item('FAL_assets_shared').'/'.$this->config->item('FAL_js');?&gt;/flash.js" type="text/javascript">

config->item('FAL_assets_shared').'/'.$this->config->item('FAL_js');?&gt;/effects.js" type="text/javascript">

config->item('FAL_assets_shared').'/'.$this->config->item('FAL_js');?&gt;/lightbox.js" type="text/javascript">

config->item('FAL_assets_shared').'/'.$this->config->item('FAL_js');?&gt;/scriptaculous.js?load=effects" type="text/javascript">

config->item('FAL_assets_shared').'/'.$this->config->item('FAL_js');?&gt;/prototype.js" type="text/javascript">

&lt;/head&gt;

Any help/advice/suggestions would be most welcome.

Thanks Skewbie

02-13-2008, 01:36 PM

[eluser]Grahack[/eluser]
Hi, and welcome to CI and FAL and all our wonderful community.
Maybe it's a js conflict. Try to find tools to debug your javascript execution.
Good luck!

02-15-2008, 01:49 PM

[eluser]skewbie74[/eluser]
Hi

I have tried to eliminate any javascript clashes between the different libraries but could not find any. I still have the same problem.

regards

skewbie

02-15-2008, 02:04 PM

[eluser]Grahack[/eluser]
Do you have some more debug info? Javascript errors?

02-16-2008, 04:50 AM

[eluser]skewbie74[/eluser]
Hi

No, I get no javascript errors the link just redirects straight to the large image rather than bringing up the lightbox box. I have done file comparisons on all the javascript libraries I have in my <head> e.g. prototype.js, effects.js, scriptaculous, lightbox.js, flash.js and jquery.js but have found no clashes.

thanks

skewbie.

02-16-2008, 05:35 AM

[eluser]bugboy[/eluser]
is it because your loading prototype last? i read there was an order and prototype was before any scriptaculous stuff.

02-16-2008, 05:42 AM

[eluser]skewbie74[/eluser]
Hi

I have done a lightbox test on a clean install of CI with 1 controller and 1 view. Here is the source of the view:

Code:
&lt;html&gt;

&lt;head&gt;

    &lt;title&gt;Lightbox Test&lt;/title&gt;

    &lt;link href="&lt;?php echo $this-&gt;config->item('base_url');?&gt;/assets/css/lightbox.css" rel="stylesheet" type="text/css" />

    config->item('base_url');?&gt;/assets/js/effects.js" type="text/javascript">

    config->item('base_url');?&gt;/assets/js/lightbox.js" type="text/javascript">

    config->item('base_url');?&gt;/assets/js/scriptaculous.js?load=effects" type="text/javascript">

    config->item('base_url');?&gt;/assets/js/prototype.js" type="text/javascript">

&lt;/head&gt;

&lt;body id="body"&gt;

<a href="&lt;?php echo $this->config->item('base_url');?&gt;/assets/images/image-1.jpg" rel="lightbox[test]"  title="image 1">img-1</a>

I have checked the source of the html output of the view to make sure it is picking up the correct paths for the assets (js, css etc). Here is that output:

Code:
&lt;head&gt;

    &lt;title&gt;Lightbox Test&lt;/title&gt;

    &lt;link href="http://localhost/ci154/assets/css/lightbox.css" rel="stylesheet" type="text/css" /&gt;

&lt;/head&gt;

&lt;body id="body"&gt;

<a href="http://localhost/ci154/assets/images/image-1.jpg" rel="lightbox[test]"  title="image 1">img-1</a>

I have even double checked by modifying the css file to make sure it is actually picking it up and this works. However, when I try to do a simple scriptaculous test to make sure the js files are being picked up - nothing happens (example taken from scriptaculous demo site):

Code:
&lt;div id="example" onclick="new Effect.Fade(this); window.setTimeout('Effect.Appear(\'demo-effect-fade\', {duration:.3})',2500);"&gt;

        <img src="&lt;?php echo $this->config->item('base_url');?&gt;/assets/images/demo-logo.gif" alt="" /><br>

        <span>Click for Effect.Fade demo</span>

      </div>

</div>

If I create a lightbox test page outside of a CI install e.g. http://localhost/lightboxtest.html this works fine - it only stops once inside the CI folders. It looks to me that it might be the includes of the javascript files that is not working properly but I do not know where to go from here.

Thanks

Skewbie.

02-16-2008, 05:44 AM

[eluser]skewbie74[/eluser]
Hey bugboy!!

Fantastic! How easy is that fix - this actually worked!! Thank you so much!! Big Grin

skewbie.

02-16-2008, 05:55 AM

[eluser]bugboy[/eluser]
No worries. Glad i helped out.

07-15-2008, 10:42 PM

[eluser]Asinox[/eluser]
Thanks this fixed my problem too Smile