CMS Made Simple Forums

Posted: **Tue May 19, 2015 1:42 pm**

Be sure your jQuery is linked properly -- it needs to be load first before your JS to initialize cycle. Or, use Cycle2 and you don't need to worry about document.ready stuff.

What I am getting now is all 5 of my images displayed one on top the other, but with no kind of cycle effect.

Regular, default Cycle and Cylce is a slideshow (cycle). You'll need the cycle2 carousel plugin to have a carousel.

A slideshow (cycle) is all images on top of each other, fading out, or sliding out, to reveal the image below.

A carousel is a row (or column) of images where more than one image is visible while it transitions.

Posted: **Tue May 19, 2015 2:49 pm**

This is the source (at least for the head section of my page). Does it look like jquery is linked properly?

Code: Select all

<!doctype html>
<__html lang='en' dir='ltr'>
<head>
<meta charset='UTF-8'>
<title>Home - Arrive Alive Trinidad & Tobago</title>
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<meta name='HandheldFriendly' content='true' />


<base href="http://localhost:8080/arrivealive/" />
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-12 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

<link rel='canonical' href='http://localhost:8080/arrivealive/' />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arrivealive/tmp/cache/stylesheet_combined_7315ccc485a237e7e3d43c9534a2e39e.css" media="print" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arrivealive/tmp/cache/stylesheet_combined_5cf7f2b72242363b369fa59ebcc551bf.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arrivealive/tmp/cache/stylesheet_combined_442d6b03e56a26b18b8b208074066519.css" media="screen and (min-width: 300px) and (max-width: 1024px)" />


<link href='//fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>

<!--[if lt IE 9]>
<__script__ src="//html5shiv.googlecode.com/svn/trunk/html5.js"></__script>
<![endif]-->

<link rel="start" title="Home Page, shortcut key=1" href="http://localhost:8080/arrivealive/" />

<link rel="next" title="Road Safety" href="http://localhost:8080/arrivealive/index.php?page=road-safety" />
<link rel="icon" 
      type="image/jpg" 
      href="/uploads/images/favicon.png" />

<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery-1.11.0.min.js"></__script>
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery-migrate-1.2.1.min.js"></__script>
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery-ui-1.10.4.custom.min.js"></__script>
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery.ui.nestedSortable-1.3.4.js"></__script>
<__script__ type="text/javascript" src="http://localhost:8080/arrivealive/lib/jquery/js/jquery.json-2.3.min.js"></__script>


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

Posted: **Tue May 19, 2015 3:33 pm**

Looks ok, but this is not going to give you a carousel:

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

Also, it is very possible that the old Cycle is not compatible with new jQuery...

Here's what I would do:
1) download new cycle2
2) grab the code from the carousel example page I linked to earlier
3) in your template or page, just make a simple list of images, for testing - it can be anything for now
4) initialize the carousel, like the the example page and test

Posted: **Tue May 19, 2015 4:36 pm**

There's a good chance the first thing you did would have worked except that cycle defaults to look for images and you have/had them in divs which doesn't work automatically, you would have to tell it to cycle the divs...

Posted: **Tue May 19, 2015 6:24 pm**

JohnnyB wrote:Looks ok, but this is not going to give you a carousel

No problem. At this point I'm just trying to see how it all fits together, ie, where to put code and scripts, etc. So it doesn't matter if it's a carousel or a slider, I just want to get something that works

JohnnyB wrote:Also, it is very possible that the old Cycle is not compatible with new jQuery...

Here's what I would do:
1) download new cycle2
2) grab the code from the carousel example page I linked to earlier
3) in your template or page, just make a simple list of images, for testing - it can be anything for now
4) initialize the carousel, like the the example page and test

I'll try that

Posted: **Tue May 19, 2015 6:27 pm**

Dr.CSS wrote:There's a good chance the first thing you did would have worked except that cycle defaults to look for images and you have/had them in divs which doesn't work automatically, you would have to tell it to cycle the divs...

Thanks. I changed it to just images, no divs and I just got all the images displayed side by side and wrapping down to the next row on the page when the first row filled up.

Could it be as JohnnyB suggested that this won't work with the new jquery?

Posted: **Tue May 19, 2015 6:47 pm**

can you post a link to the page? Or use your browser's Console to see if there are any Javascript errors?

Posted: **Tue May 19, 2015 7:21 pm**

I've tried switching to Cycle2 and am having pretty much the same issue as I was with the Cycle. See the screenshot:

The images show one on top of the other outside of the area I was trying to put them on the page (they should be in the white space to the right of where they are, and they should be horizontal, not vertical.

Is it that I am missing some entries in a stylesheet, maybe?

I've attached the source of the page, zipped up.

I just realised why it was not where I wanted it to be so I have fixed that, but the carousel is still not working

Posted: **Tue May 19, 2015 7:42 pm**

I think the cycle2 carousel demo page has a typo

Use classname "cycle-slideshow" instead of "slideshow"

Also, here's an example of cycle2 and carousel I put together last week (not a cmsms site, but it will show you the code you need)

http://cottagedecormaine.com/

Btw, I put all of my JS at the bottom of the <__body> so don't let that throw you off... Also, I combine the plugins in the main cycle2 script (one file for all).

Posted: **Tue May 19, 2015 7:51 pm**

Thanks, I'm edging closer!

The cycle-slideshow helped the display. I also set the data-cycle-carousel-visible="2" so only 2 images show which fits the space better.

However, the next and previous buttons don't display the next image. Clicking Next seems to take me to the top of the page. How is using the

Code: Select all

href="#"

supposed to cause the next image to display?

I got the next and previous links to work, I had them set to the wrong id (id="prev3" but it should have been id="prev"

Posted: **Tue May 19, 2015 8:04 pm**

That is because of how CMSMS parses links and pages, etc...
You will probably need to build a custom link for the next/previous and then set those custom ID's in the data-cycle- attributes

OR, use JS to stop the default behavior of those links on click

CMSMS will take a href="#" link and send you back to the home page...

So, it needs an absolute path to the page you are on:
href="my-page#"

you can do that a few different ways using Smarty tags and CMSMS template tags like {root_url} or {$smarty,get.page} -- might need to Google for some tips.

Or you can use some jQuery to stop those links from doing their default with something like this:

Code: Select all

 $(function(){
	 
	 #('#next').on('click', function(e) {
	 e.preventDefault();
	 });
	 	 
 });

Posted: **Tue May 19, 2015 8:39 pm**

Thanks very much! I now have it working on the live site:

http://pavitandt.org/index.php?page=com ... h-barriers

A couple more questions and then I'll leave you alone

I have some other pictures that are not the same size as these ones and I would like to display them as well, but they make the display strange in that I might see half a picture. Is there a way to control the sizes of the images, or should I do another carousel for the differently sized images?

I like the display of the dots underneath the previous and next buttons in the Controls example on the page you sent me to:

http://jquery.malsup.com/cycle2/demo/carousel.php

How do I get my dots to show up better than the small ones I am getting?

Posted: **Wed May 20, 2015 1:23 pm**

FCazabon wrote:I have some other pictures that are not the same size as these ones and I would like to display them as well, but they make the display strange in that I might see half a picture. Is there a way to control the sizes of the images, or should I do another carousel for the differently sized images?

I usually use the same sized images to keep things simple. But, I think Cycle2 has some options for responsiveness and auto width/height - visit the api page to see additional settings and if any of them work.

Another thing you can try is using the CMSMS module, CGSmartImage. It can be used to resize each image, dynamically based upon what you specify in the settings. Maybe that can help.

How do I get my dots to show up better than the small ones I am getting?

The HTML structure of the pager dots is:

Code: Select all

<div id="pager" class="cycle-pager" align="center">&nbsp;<span class="cycle-pager-active">•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span></div>

So, you can target those with CSS to increase the font-size and make the active dot a different color or size. Maybe something like:

Code: Select all

#pager span {font-size:20px; color:black;}
#pager .cycle-pager-active {color:red;}

When viewing your web page, press F12 to open the browser's console / DOM view and you can see the elements that are created with Javascript.

Posted: **Wed May 20, 2015 11:21 pm**

Thanks very much JohnnyB and the others who helped me along the way. I think I've got it working as I want it to.

CMS Made Simple Forums

Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?

Re: Carousel Module?