News Slider

[Barrowboy]

Hi

Can anyone help with this? Trying to add a news slider code taken from

https://cmscanbesimple.org/blog/create- ... -or-images

Using cmsms version 2.2.8 and template bandb_master.

This code in the head.
{cms_jquery}

<__script__ type="text/javascript" src="scripts/jquery.cycle.all.min.js"></__script>
<__script__ type="text/javascript">
$(document).ready(function() {
$('.slider').cycle( {
fx: 'scrollRight',
timeout: 5000,
pause: 1,
cleartypeNoBg: true
} );
} );
</__script>

And the following in a page.

<div class="slider">
{foreach from=$items item=entry}
<div class="NewsSummary">
{news category="General" number='5'}
</div>
{/foreach}
</div

But nothing shows apart from a blank box.

The link to the jquery file is correct and in the right place.

So is there something missing or will it just not work with the current version?

Thanks for ant advice.

[velden]

This makes no sense:

Code: Select all

<div class="slider">
{foreach from=$items item=entry}
<div class="NewsSummary">
{news category="General" number='5'}
</div>
{/foreach}
</div

In page template something like this:

Code: Select all

{news category="General" number='5'}

In the default news summary template something like this:

Code: Select all

<div class="slider">
{foreach from=$items item=entry}
<div class="NewsSummary">
  {$entry->title}{* pick the right properties later *}
</div>
{/foreach}
</div

[DIGI3]

Make sure you're not loading jQuery twice - the b&b theme already loads it so {cms_jquery} is probably not necessary.

I don't know if that's the problem, I'd need to see the site to diagnose, but something to keep in mind.

Validate your html, check your browser's console for js errors, and try on a simplified template to narrow down the issue.

[Barrowboy]

Hi Velden

Thanks for your reply, I am a little further on now but what I now have is list displayed and not a box that slides.

Would you be good enough to take a look at my summary template to see if there is any thing else wrong.

{cms_jquery} is in the main template which is required by the Calendar I have tried removing that but still the same.
I can't see anywhere that the JS is being called twice.

Thanks again for your help.

Code:-----------------Summary Template

<div class="ns_container">
<div class="slider">
{foreach from=$items item=entry}
<div class="NewsSummary">
{$entry->title}{* pick the right properties later *}

{* Don't display the post date. It can be confusing if the news item has a date
{if $entry->postdate}
<div class="NewsSummaryPostdate">
{$entry->postdate|cms_date_format}
</div>
{/if}
*}

<div class="NewsSummaryLink">
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</div>

<div class="NewsSummaryCategory">
{*{$category_label} {$entry->category}*}
</div>

{if $entry->author}
<div class="NewsSummaryAuthor">
{$author_label} {$entry->author}
</div>
{/if}

{if $entry->summary}
<div class="NewsSummarySummary">
{eval var=$entry->summary}
</div>

<div class="NewsSummaryMorelink">
[{$entry->morelink}]
</div>

{else if $entry->content}

<div class="NewsSummaryContent">
{eval var=$entry->content}
</div>
{/if}

{if isset($entry->extra)}
<div class="NewsSummaryExtra">
{eval var=$entry->extra}
{* {cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue} *}
</div>
{/if}
{if isset($entry->fields)}
{foreach from=$entry->fields item='field'}
<div class="NewsSummaryField">
{if $field->type == 'file'}
<img src="{$entry->file_location}/{$field->value}"/>
{else}
{$field->name}:&nbsp;{eval var=$field->value}
{/if}
</div>
{/foreach}
{/if}

</div>
{/foreach}
</div>
</div>
<__script__ src="http://code.jquery.com/jquery-1.9.1.min.js"></__script>
<__script__ type="text/javascript" src="/lib/jquery/js//jquery.cycle.all.min.js"></__script>
<__script__ type="text/javascript">
$(document).ready(function() {
$('.slider').cycle( {
fx: 'scrollRight',
timeout: 5000,
pause: 1,
cleartypeNoBg: true
} );
} );
</__script>

[Barrowboy]

Just spotted a typo error in this link.

<__script__ type="text/javascript" src="/lib/jquery/js//jquery.cycle.all.min.js"></__script>

Now corrected to:-
<__script__ type="text/javascript" src="/lib/jquery/js/jquery.cycle.all.min.js"></__script>

But problem still the same.

[Barrowboy]

Hi

I don't know if this will help you to find an answer to my problem.

On further testing I now have the news slider working by using template
Left simple navigation + 1 column.

But when I switch to bandb or simplex templates it fails. So I have concluded that it will not work on a responsive type template.??

On both of these templates has a test I have removed any other references to JS but still no joy.

Help.

[DIGI3]

Can you post links to a working and non-working version of the page?

[Barrowboy]

Hi Digl3

Links are as follows.

http://www.busca.org.uk/test-slider-good


http://www.busca.org.uk/test-slider-bad

The bad one is on bandb template.
I have some more work to do on the CSS once its working on the correct template.

Thanks for help.

[Rolf]

This will help you: https://validator.w3.org/nu/?doc=http%3 ... slider-bad

[DIGI3]

Yes, besides the html errors, also be sure to check your javascript console. I can see that the script is failing, and also that you're loading jquery twice - once at the top and once at the bottom - different versions.

It's nothing to do with it being a responsive template, you just need to clean up your code and diagnose the errors.

[Barrowboy]

Hi

Thanks for all you comments and help.

I now do have the news slider working just need to do some styling.

The problem was as suggested the jQuery js was being called twice once in the bottom of the template and again in the news summary template.

What was confusing me was that the slider will only work with the JS in the news summary template not in the main template. Removing it from the main template doesn't appear to affect anything else.

Thanks again.

[Barrowboy]

Hi
Could you help with another problem regarding the slider.

I can get the Read More button to work. The slider works fine.

The read more works fine in news.

This is my default summery template for the slider.

<div class="row small-up-1 medium-up-3" data-equalizer data-equalizer-on="medium" >
<div class="ns_container">
<div class="slider">
{foreach from=$items item=entry}
<div class="column">
<div class="card" data-equalizer-watch>

<div class="card-divider">
<h4>{$entry->title|cms_escape}</h4>
</div>

{if isset($entry->fields)}
{foreach from=$entry->fields item='field'}
{if $field->type == 'file'}
{if isset($field->value) && $field->value}
<img src="{$entry->file_location}/{$field->value}" alt="{$field->value}" />
{/if}
{elseif $field->type == 'linkedfile'}
{if !empty($field->value)}
<img src="{file_url file=$field->value}" alt="{$field->value}" />
{/if}
{/if}
{/foreach}
{/if}

<div class="card-section">
{if $entry->postdate}
Posted {$entry->postdate|cms_date_format}
{/if}

{if $entry->summary}
{$entry->summary}
{else if $entry->content}
{$temp="{eval var=$entry->content}"}
<p>{$temp|strip_tags|truncate:280}</p>
{/if}
<a class="button" href="{$entry->moreurl}">read more&hellip;</a>

</div>
</div>
</div>
{/foreach}
</div></div></div>
<__script__ src="http://code.jquery.com/jquery-1.9.1.min.js"></__script>
<__script__ src="/lib/jquery/js/jquery.cycle.all.min.js"></__script>
<__script__ type="text/javascript">
$(document).ready(function() {
$('.slider').cycle( {
width: 400,
height: 400,
fx: 'scrollLeft',
timeout: 3000,
pause: 1,
cleartypeNoBg: true
} );
} );
</__script>

[Barrowboy]

All sorted problem was z-index in CSS.

Thanks