Using jQuery in an Template: Problems with Smarty

[narrenfrei]

I try to adapt the plugin_mediainsert.tpl to show the images in a slider using this code:

Code: Select all

<div class="serendipity_mediainsert_gallery">
    <div id="slider_{$plugin_mediainsert_media.0.path|@makeFilename}" class="nivoSlider">
        {foreach from=$plugin_mediainsert_media item="medium"}
            <a class="serendipity_image_link" href="/uploads/{$medium.path}{$medium.realname}">
            <!-- s9ymdb:795 -->
            <img src="/uploads/{$medium.path}{$medium.name}.{$medium.thumbnail_name}.{$medium.extension}" alt="{$medium.comment1}" title="{$medium.comment1}" />
            </a>
        {/foreach}
        
    </div>
</div>

<script type="text/javascript">
        $(window).load(function() {
            $('#slider_{$plugin_mediainsert_media.0.path|@makeFilename}').nivoSlider({
        });
        });
</script>

I'm getting the following message from Smarty:

Fatal error: Smarty error: [in file:/www/htdocs/w00c2189/s9y/templates/narrenfrei_1/plugin_mediainsert.tpl line 14]: syntax error: unrecognized tag: $('#slider_{$plugin_mediainsert_media.0.path|@makeFilename (Smarty_Compiler.class.php, line 446) in /www/htdocs/w00c2189/s9y/bundled-libs/Smarty/libs/Smarty.class.php on line 1093

I think one problem is the syntax of jQuery with the "$". But also if I write jQuery instead of $ I get nearly the same error message. Is the # also not allowed in Smarty?

[yellowled]

Code: Select all

<script type="text/javascript">
        $(window).load(function() {
            $('#slider_{$plugin_mediainsert_media.0.path|@makeFilename}').nivoSlider({
        });
        });
</script>

How about this?

Code: Select all

<script type="text/javascript">
    jQuery(document).ready(function() {ldelim}
        jQuery('#slider_{$plugin_mediainsert_media.0.path|@makeFilename}').nivoSlider();
    {rdelim});
</script>

First of all, if you write an inline script element, { and } in that element need to be escaped using {ldelim} and {rdelim}. Second, if you're using a s9y version which already includes jQuery, yes, it runs in noConflict mode and you need to use jQuery instead of $. And third, if you don't pass on any options to nivoSlider, you can leave out the curly brackets in the nivoSlider call. If you need to pass options, these curly brackets should be escape as well.

As far as I know, there's no reason to not use # here. That would mean one couldn't use it for anchor links as well, which is definitely not the case.

YL

[yellowled]

First of all, if you write an inline script element, { and } in that element need to be escaped using {ldelim} and {rdelim}.

... which is no longer necessary if you use Don's suggestion.

YL

[Don Chambers]

Actually, I deleted my initial response... the entire script cannot be wrapped in {literal} tags (which I started to suggest) because it includes {$plugin_mediainsert_media.0.path|@makeFilename}, so your suggestion is the better choice.

[narrenfrei]

Thanks for the tipps, now it works great!
Maybe you can help me also with another problem, which I have in the same tpl-file: http://board.s9y.org/viewtopic.php?f=2&t=17596

Now I'm using {$plugin_mediainsert_media.0.path|@makeFilename} to generate a ID for the slider-div, but I think it would be better if I use the {entry.id} (or a combination of both), because it would be more unique.

Once more great Thanks for your help.