[Solved]Products module images - jQuery issue

[jasnick]

Using 1.11.7 and up todate modules

Nearly finished the Detail Template which contains a block of images. I want each image to show larger version when clicked.

Part of Detail Template:

Code: Select all

<div id="imagebox">
<ul class="img">
<li><div>
<a href="{$entry->file_location}/{$entry->fields.photo1->value}"><img src="{$entry->file_location}/{$entry->fields.photo1->thumbnail}"></a></div></li>
<li><div>
<a href="{$entry->file_location}/{$entry->fields.photo2->value}"><img src="{$entry->file_location}/{$entry->fields.photo2->thumbnail}"></a></div></li>
<li><div>
<a href="{$entry->file_location}/{$entry->fields.photo3->value}"><img src="{$entry->file_location}/{$entry->fields.photo3->thumbnail}"></a></div></li>
</ul></div>

This works except large images appear on new page instead of in a lightbox.
This is what I have in the Page Specific Metadata section of the page that displays the Detail Template:

Code: Select all

<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
    <__script__ type="text/javascript" src="jquery.js"></__script>
    <__script__ type="text/javascript" src="jquery.lightbox-0.5.js"></__script>	
    <__script__ type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </__script>

I placed the 3 files (css and 2 js scripts) in the root. This is probably the wrong place?
Thanks to Rolf for earlier help which has got me this far.
[Later] Have just noticed I already have the following on the page:

Code: Select all

<__script__ type="text/javascript" src="mysite/lib/jquery/js/jquery-1.7.2.min.js"></__script>
<__script__ type="text/javascript" src="mysite/lib/jquery/js/jquery-ui-1.8.21.custom.min.js"></__script>
<__script__ type="text/javascript" src="mysite/lib/jquery/js/jquery.ui.nestedSortable-1.3.4.js"></__script>
<__script__ type="text/javascript" src="mysite/lib/jquery/js/jquery.json-2.3.min.js"></__script>

Could this be causing a problem?
Thanks

[velden]

Make sure not to include jquery (or other js files) twice. That wil certainly break fancybox and all other jQuery scripts.

Root is not per se a wrong place (would not be my first choice though). However, best practice is to use an absolute url to the files (my opinion)

Code: Select all

<__script__ type="text/javascript" src="{root_url}/jquery.js"></__script>

I always create an uploads/template/ folder with a 'js', 'img' and 'css' directory if needed. (However, that doesn't prevent editors from browsing to that location with FileManager while the root by default can not be accessed).

Code would then be:

Code: Select all

<__script__ type="text/javascript" src="{uploads_url}/template/js/jquery.js"></__script>

Use Firefox with Firebug and you will find problems much faster them just guessing what's going on.

[jasnick]

Hi velden - yes, I thought just putting them in root would do for now, for testing, and was going to put them in their own folder later. I did start with absolute urls, then shortened them. I can remember years ago pre CMSMS I had a similar problem and it turned out to be duplicate js files.

This is why I looked at what was in the Head and saw the other js files that must have come with the installation of CMSMS. I must be getting confused - now I can't find those other js files in the Head of the page.

I'm using the js files from the original (non-CMSMS) site - I wonder if they are not compatible with CMSMS? They work on that site.

I don't think we need to use {literal}{/literal} any more do we?

I had a look in Firebug:

What does this mean

Thanks!

[velden]

That probably means that jQuery is not loaded.

Possible causes:

- jquery not included at all
- jquery included twice
- jquery included AFTER some other script tries to use it.

Why not share a link so we can see what happens?

[jasnick]

Thanks velden - site is in my test site - very early stages; I want to get the stock pages sorted before starting the rest and moving it to its own site.



Thanks

[velden]

Code: Select all

 <__script__ type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </__script>

You try to 'lightBox' anchor tags inside an object with id #gallery. But there is no object '#gallery'.

I think with '#imagebox' it should work:

<__script__ type="text/javascript">
$(function() {
$('#imagebox a').lightBox();
});
</__script>

[jasnick]

Velden - Brilliant !!! Closing down for the night now but just had to try it and it works! Will study up on it tomorrow.

Thank you so much!