[SOLVED]Automatic scrolling images (horizontal)over the page

[chrisbar]

Does anybody know a way to get a row of images scrolling automated over the webpage?
Slideshow - to my opinion - does not offer the solution?

Chris

[Dr.CSS]

Scrolling like a slide show?...

[chrisbar]

I mean that you see sliding 4 or 5 images next to eachother sliding from right tot left over the webpage.

[Dr.CSS]

I use this all the time for these things...

http://malsup.com/jquery/cycle/

[chrisbar]

But these are all examples of showing one image a time. I am looking for a solution showing a row of pictures sliding form right to left or from left to right.

[nils73]

I assume you are looking for something like Nivo - a jQuery plugin for an image slideshow.

You do not need anything else, just a global_content or a content block with a few images and no markup. Usually I use global_content blocks since I can control the markup better there.

Regards
Nils

[chrisbar]

I have found a plugin (smoothdivscroll) which exactly does the thing I need.....when implemented right
I have copied the CSS code and connected it to the used sjabloon. I entered the basic html code in a page but the result is two images (I entered just two images in the example so that's ok) but next to that I get the following error:

string(159) "Smarty error: [in content:content_en line 9]: syntax error: unrecognized tag: $("div#makeMeScrollable").smoothDivScroll({ (Smarty_Compiler.class.php, line 446)" string(117) "Smarty error: [in content:content_en line 9]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(169) "Smarty error: [in content:content_en line 12]: syntax error: unrecognized tag: width:100%; height: 330px; position: relative; (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in content:content_en line 12]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(181) "Smarty error: [in content:content_en line 12]: syntax error: unrecognized tag: position: relative; float: left; margin: 0; padding: 0; (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in content:content_en line 12]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)"

I know that I have to learn the trick but can somebody show me what I forgot? Maybe have a look at http://www.smoothdivscroll.com (a specialist shall know what I forgot).

I'm using 1.9.2 CMS and a link to the page is:
http://www.red-eagles.nl/index.php?page=playoffs-u17

Kind regards

Chris

[hoshy]

Your only fault is that you did not read the documentation
Wrap your js code (or CSS or ... whatever contains curly braces but is no smarty code) in {literal} ... {/literal} tags.
That should be all.

[chrisbar]

The errors have left the page and I see the images well, but it doesn't scroll..? You say read the documentation, but some documentation I don't understand

This is the JQuery code...where do I put this code then, because maybe that's the trick?

<__script__ type="text/javascript">
$(function() {
$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always"});
});
</__script>

Underneath is the CSS code I have attached to the pagelayout

Code: Select all

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--><!-- the CSS for Smooth Div Scroll --><!-- jQuery library - I get it from Google API's -->
<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></__script>
<!-- jQuery UI widget factory --><!-- You can download it as a part of jQuery UI Core 		 http://jqueryui.com/download -->
<__script__ src="js/jquery.ui.widget.js" type="text/javascript"></__script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<__script__ src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></__script>


<__script__ type="text/javascript">// <![CDATA[
		// Initialize the plugin with no custom options
		$(function() {
			$("div#makeMeScrollable").smoothDivScroll({});
		});
// ]]></__script>

<!-- Styles for my specific scrolling content --><!-- 		#makeMeScrollable 		{ 			width:100%; 			height: 330px; 			position: relative; 		} 		 		#makeMeScrollable div.scrollableArea * 		{ 			position: relative; 			float: left; 			margin: 0; 			padding: 0; 		} 	 -->
<div id="makeMeScrollable">
<div class="scrollWrapper">
<div class="scrollableArea"><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /></div>
</div>
</div>

[Marijus]

script goes into the head section
images into body

[chrisbar]

Still not working. Underneath I describe what I have done:

I made a new CSS (Stylesheet) named Smoothscroll containing follwing code:

Code: Select all

{literal}
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 75 pixels 
	   and if there is room the will grow and occupy 10% 
	   of the scrollable area (20% combined). 
	   Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to 
	solve some problems I experienced in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first cursor url is for Firefox and other 
	    browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	/* Standard CSS3 opacity setting */
	opacity: 0.35; 
	/* Opacity for really old versions of 
	   Mozilla Firefox (0.9 or older) */
	-moz-opacity: 0.35;
	/* Opacity for Internet Explorer. */
	filter: alpha(opacity = 35);
	/* Use zoom to Trigger "hasLayout" in 
	   Internet Explorer 6 or older versions */	
	zoom: 1; 
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and 
   height as the containing element (div). Overflow 
   is hidden because you don't want to show all of 
   the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
{/literal}

I then attached this CSS to the pagesjabloon "U17" used for the specific page I would like to place the scrolling images in. The sjabloon U17 contains follwing code:

Code: Select all

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

  <head>
    <title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

 {metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

 {stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}

 {cms_selflink dir="start" rellink=1}
 {cms_selflink dir="prev" rellink=1}
 {cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
 {literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
    <!--[if lte IE 6]>
    <style type="text/css">
    #header {width:expression(P7_MinMaxW(720,950));}
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}

    <!--[if lte IE 6]>
    <__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
    <![endif]--> 
{* The above JavaScript is required for CSSMenu to work in IE *}

<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></__script>
<!-- jQuery UI widget factory --><!-- You can download it as a part of jQuery UI Core 		 http://jqueryui.com/download -->
<__script__ src="js/jquery.ui.widget.js" type="text/javascript"></__script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<__script__ src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></__script>
<__script__ type="text/javascript">// <![CDATA[
$(function() {
$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always"});
});
// ]]></__script>

 </head>
  </__body>


<div id="Fadingborder">


    <div id="pagewrapper">

{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
      <ul class="accessibility">
        <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
{* end accessibility skip links *}

      <hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}

{* Start Sidebar *}
        <div id="sidebar">
            <div id="logo">
            </div>        
  

<p><a href="uploads/images/Banner20SSR.gif" target="_blank"><img src="uploads/images/Banner20SSR.gif" alt="" width="196" height="46" /></a></p>

          {content block='Sidebar'}

<p> </p>
<p> </p>
<p><a href="uploads/images/Inschrijvings formulier Goalie zomertraining 2011.pdf" target="_blank"><img src="uploads/images/Goalietraining.jpg" alt="" width="130" height="93" /></a></p>
<p> </p>
<p><a href="http://www.thillartshockey.nl/inschrijven.html" target="_blank"><img src="uploads/images/THAlogozomertraining.jpg" alt="" width="130" height="93" /></a></p>          
        </div>
{* End Sidebar *}



{* Start Content *}
      <div id="content">

{* Start Navigation *}
      <div id="menu_vert">
{* stylesheet  "Navigation: CSSMenu - Horizontal" *}
        <h2 class="accessibility">Navigation</h2>
           {menu template='cssmenu.tpl' start_level='2' number_of_levels='4'}
           {menu template='cssmenu.tpl' start_level='3' number_of_levels='4'}
        <hr class="accessibility" />
      </div>
{* End Navigation *}



{* Start Breadcrumbs *}
      <div class="crbk">
        {* holds the right image, we need 2 divs to be able to make this site fluid, if it was fixed width we could use one div, one image  *}
{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
           <div id="search">
           {search searchtext=" Voer zoekterm in.." submit="Zoeken"}
           </div>
     {* End Search *}

        <div class="breadcrumbs">
        &nbsp;{breadcrumbs starttext='U bevindt zich hier' root='Home' delimiter='&raquo;'}
          <hr class="accessibility" />
        </div>

      </div>
{* End Breadcrumbs *}

{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
        <div class="back1">
             <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
               {content}
                <br />{* to insure space below content *}


{* Start relational links *}
{* note this is the right side, when you float: divs you need to have float: right; divs first *}
            
{* End relational links *}

                <hr class="accessibility" />
                <div class="clear"></div>
              </div>
        </div>
{* End Content Area *}

      </div>
{* End Content *}



    </div>
{* end pagewrapper *}

</div>


{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
      <div class="footback">
        <div id="footer">
{* stylesheet  "Navigation: FatFootMenu" *}
          
          <div id="footrt">
          {global_content name='footer'}
          </div>
          <div class="clear"></div>
        </div>
      </div>
{* End Footer *}

  <__body>
</__html>

I then made a new page (based on sjabloon U17) with the follwing content html code:

Code: Select all

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--><!-- the CSS for Smooth Div Scroll --><!-- jQuery library - I get it from Google API's -->
<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></__script>
<!-- jQuery UI widget factory --><!-- You can download it as a part of jQuery UI Core 		 http://jqueryui.com/download -->
<__script__ src="js/jquery.ui.widget.js" type="text/javascript"></__script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<__script__ src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></__script>
<__script__ type="text/javascript">// <![CDATA[
$(function() {
$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always"});
});
// ]]></__script>
<!-- Styles for my specific scrolling content --><!-- 		#makeMeScrollable 		{ 			width:100%; 			height: 330px; 			position: relative; 		} 		 		#makeMeScrollable div.scrollableArea * 		{ 			position: relative; 			float: left; 			margin: 0; 			padding: 0; 		} 	 -->
<div id="makeMeScrollable">
<div class="scrollWrapper">
<div class="scrollableArea"><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /></div>
</div>
</div>

When I open the resulting URL: I first get an error containing string(319) "Smarty error: [in content:content_en line 8]: syntax error: unrecognized tag: $("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always" (Smarty_Compiler.class.php, line 446)" string(117) "Smarty error: [in content:content_en line 8]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(169) "Smarty error: [in content:content_en line 11]: syntax error: unrecognized tag: width:100%; height: 330px; position: relative; (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in content:content_en line 11]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" string(181) "Smarty error: [in content:content_en line 11]: syntax error: unrecognized tag: position: relative; float: left; margin: 0; padding: 0; (Smarty_Compiler.class.php, line 446)" string(118) "Smarty error: [in content:content_en line 11]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)"
followed by six images in two rows of each three images. When I refresh the page the error disappears but the images stay in two rows of each three images (not scrolling).

Any idea?
thanks for the help!

Chris

[Marijus]

the link to page would help...

in css you don't need {literal}

these goes into Content:

Code: Select all

<div id="makeMeScrollable">
<div class="scrollWrapper">
<div class="scrollableArea"><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /></div>
</div>
</div>

these goes into Page Specific Metadata (or into template head section):

Code: Select all

<!-- the CSS for Smooth Div Scroll -->
	<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
	<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></__script>
	<!-- jQuery UI widget factory -->
	<!-- You can download it as a part of jQuery UI Core
		 http://jqueryui.com/download -->
	<__script__ src="js/jquery.ui.widget.js" type="text/javascript"></__script>
	<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
	<__script__ src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></__script>

{literal}
	<__script__ type="text/javascript">
		$(function() {
			$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", 
			autoScrollDirection: "backandforth",
			autoScrollStep: 1,
			autoScrollInterval: 15,
			startAtElementId: "startAtMe",
			visibleHotSpots: "always" });
		});
	</__script>

	<!-- Styles for my specific scrolling content -->
	<style type="text/css">
		#makeMeScrollable
		{
			width:100%;
			height: 250px;
			position: relative;
		}
		#makeMeScrollable div.scrollableArea *
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
		}
	</style>
{/literal}

[chrisbar]

Hello,

I made the changes as pointed out.
Here is the link: http://www.red-eagles.nl/index.php?page=playoffs-u17

I do not get the error anymore, but still no scrolling.

kind regards

Chris

[Jos]

Did you check the paths to "js/jquery.ui.widget.js" and "js/jquery.smoothDivScroll-1.1-min.js" ?

[chrisbar]

You are all great!!
Thanks for all the help. It works. I had to change the path!

kind regards

Chris