Lightbox Help

User 2693187 Photo


Registered User
167 posts

Hi guys,

Need some help.

Trying to get Fancybox lightbox working on the site.

Now this is how I'm doing but epically failing.

So I've loaded up fancybox as a separate resource folder.

In the Head I've put:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


Footer I've put
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

HTML ELEMENT
Then I set a HTML element and I've put in my images with the fancybox code.
<a class="fancybox" rel="group" href="img/big.png"><img src="img/small.png" alt="" /></a>

It's linking but the fancybox isn't connecting.

Any ideas - it's doing my head in.

Much appreciated.

Link to website is:
http://www.ajhdesigns.com.au/test/
-A.

User 187934 Photo


Senior Advisor
20,193 posts

I'm not sure where your files are located but if you know where there are change these links to absolute for testing.
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2693187 Photo


Registered User
167 posts

Hi Eric,

Not to sure what you mean by absolute.
The route to the JS and CSS are all correct with how they connect.

I've included my export folder and RSD file here if you think you can nut it out..
www.ajhdesigns.com.au/lightbox.zip

I think I've tried just about everything.

-A.
User 187934 Photo


Senior Advisor
20,193 posts

Their not otherwise these links would work.
http://www.ajhdesigns.com.au/fancybox/l … .6.pack.js
http://www.ajhdesigns.com.au/fancybox/s … ss?v=2.1.5
http://www.ajhdesigns.com.au/fancybox/s … js?v=2.1.5
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,193 posts

Try this way.

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://www.ajhdesigns.com.au/test/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="http://www.ajhdesigns.com.au/test/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.ajhdesigns.com.au/test/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2693187 Photo


Registered User
167 posts

Hi Eric,

Just tried and uploaded - still no go.

www.ajhdesigns.com.au/test
-A.
User 187934 Photo


Senior Advisor
20,193 posts

Try putting the scripts in the Footer under "Setting" in RSD. They should look like this.
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://www.ajhdesigns.com.au/test/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="http://www.ajhdesigns.com.au/test/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.ajhdesigns.com.au/test/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2693187 Photo


Registered User
167 posts

Oh man!

* Insert Jumping for joy here*

Putting it in footer worked magnificently!! Eric you are awesome. Now next step working out image hovers, then I can progress with the rest of the site.

If anyone needs help I can give them a step by step.

http://www.ajhdesigns.com.au/test/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.