CMS Made Simple Forums

Posted: **Tue Aug 13, 2013 2:44 am**

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

Posted: **Tue Aug 13, 2013 7:26 am**

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.

Posted: **Tue Aug 13, 2013 9:10 am**

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!

Posted: **Tue Aug 13, 2013 10:11 am**

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?

Posted: **Tue Aug 13, 2013 12:12 pm**

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

Posted: **Tue Aug 13, 2013 12:58 pm**

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>

Posted: **Tue Aug 13, 2013 1:38 pm**

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!

CMS Made Simple Forums

[Solved]Products module images - jQuery issue

[Solved]Products module images - jQuery issue

Re: Products module images - jQuery issue

Re: Products module images - jQuery issue

Re: Products module images - jQuery issue

Re: Products module images - jQuery issue

Re: Products module images - jQuery issue

Re: Products module images - jQuery issue