Zikula Community

• milleja46
  
  

  • Rank: Freshman
  • Registered: Jun 10, 2011
  • Last visit:
  • Posts: 61

  Posted: Dec 14, 2011 - 05:56 AM

  Ok i'm going through the phase of rewritting my theme/template on zikula and can't figure out how to get the nivo slider to work. Nivo is a jquery slider but i know from what i see on the page it has to be reformmated to work with zikula which i've done. But i don't see anything on screen now (eg look at http://www.m46sg.tk ).
  
  A suggestion of what should be on the page is at http://nivo.dev7studios.com/demos/3/ any help on how to get it working would be good so i could finish this theme.
  
  
  Edit: nevermind a mod can delete this topic i've figured it out somewhat
  
  
  
  Edited by milleja46 on Dec 14, 2011 - 08:08 AM.

  • 
  •  
• Guite
  
  

  • Rank: Team Member
  • Registered: Jan 19, 2003
  • Last visit: Apr 06, 2010
  • Posts: 442

  Posted: Dec 14, 2011 - 11:05 PM

  Maybe you could share the solution for beginners who are reading this due to their interest in getting things running.
  
  --
  Guite | ModuleStudio

  • 
  •  
• milleja46
  
  

  • Rank: Freshman
  • Registered: Jun 10, 2011
  • Last visit:
  • Posts: 61

  Posted: Dec 15, 2011 - 02:29 AM

  The solution is this http://nivo.dev7studios.com/support/jquery-plugin-usage/
  
  Guide version of it:
  
  1.) First put this in your header:
  
  http://pastebin.com/rvDZS6yn
  
  ^ This site won't let me paste that in here without producing errors so i'm posting it on that link instead
  
  Note: for the slider CSS, copy the CSS from the download they offer into yours
  
  2.) Some setup CSS for the slider(this doesn't theme it you either have to write your own or use a default from the download of their software):
  

  Code

  .nivoSlider {
      position:relative;
      width:618px; /* Change this to your images width */
      height:246px; /* Change this to your images height */
      background:url(images/loading.gif) no-repeat 50% 50%;
  }
  .nivoSlider img {
      position:absolute;
      top:0px;
      left:0px;
      display:none;
  }
  .nivoSlider a {
      border:0;
      display:block;
  }

  
  
  3.) To get it running use the following code:
  
  

  Code

  $(window).load(function() {
      $('#slider').nivoSlider({
          effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
          slices: 15, // For slice animations
          boxCols: 8, // For box animations
          boxRows: 4, // For box animations
          animSpeed: 500, // Slide transition speed
          pauseTime: 3000, // How long each slide will show
          startSlide: 0, // Set starting Slide (0 index)
          directionNav: true, // Next & Prev navigation
          directionNavHide: true, // Only show on hover
          controlNav: true, // 1,2,3... navigation
          controlNavThumbs: false, // Use thumbnails for Control Nav
          controlNavThumbsFromRel: false, // Use image rel for thumbs
          controlNavThumbsSearch: '.jpg', // Replace this with...
          controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
          keyboardNav: true, // Use left & right arrows
          pauseOnHover: true, // Stop animation while hovering
          manualAdvance: false, // Force manual transitions
          captionOpacity: 0.8, // Universal caption opacity
          prevText: 'Prev', // Prev directionNav text
          nextText: 'Next', // Next directionNav text
          randomStart: false, // Start on a random slide
          beforeChange: function(){}, // Triggers before a slide transition
          afterChange: function(){}, // Triggers after a slide transition
          slideshowEnd: function(){}, // Triggers after all slides have been shown
          lastSlide: function(){}, // Triggers when last slide is shown
          afterLoad: function(){} // Triggers when slider has loaded
      });
  });

  
  
  The code above shouldn't matter where you place it as long as the page you are wanting it on can access it.
  
  
  Finally the effect parameter can be any of the following:
  

  Quote

  
  sliceDown
  sliceDownLeft
  sliceUp
  sliceUpLeft
  sliceUpDown
  sliceUpDownLeft
  fold
  fade
  random
  slideInRight
  slideInLeft
  boxRandom
  boxRain
  boxRainReverse
  boxRainGrow
  boxRainGrowReverse
  

  
  
  
  
  Edited by milleja46 on Dec 15, 2011 - 02:36 AM.

  • 
  •  
• milleja46
  
  

  • Rank: Freshman
  • Registered: Jun 10, 2011
  • Last visit:
  • Posts: 61

  Posted: Dec 15, 2011 - 03:07 AM

  NOTICE: my site will be down so the solution can't be viewed. I'm currently checking to see if my hosting provider has PDO enabled because on trying to upgrade i get the following error now:
  
  

  Quote

  Uncaught exception PDO Connection Error: SQLSTATE[28000] [1045] Access denied for user 'root\@\localhost' (using password: NO) in /home/msgcocc/public_html/lib/vendor/Doctrine/Doctrine/Connection.php line, 474
  #0 /home/msgcocc/public_html/lib/vendor/Doctrine/Doctrine/Connection/Mysql.php(101): Doctrine_Connection->connect()
  #1 /home/msgcocc/public_html/lib/vendor/Doctrine/Doctrine/Connection.php(1001): Doctrine_Connection_Mysql->connect()
  #2 /home/msgcocc/public_html/lib/vendor/Doctrine/Doctrine/Connection.php(850): Doctrine_Connection->execute('SHOW TABLES', Array)
  #3 /home/msgcocc/public_html/lib/vendor/Doctrine/Doctrine/Import/Mysql.php(221): Doctrine_Connection->fetchColumn('SHOW TABLES')
  #4 /home/msgcocc/public_html/upgrade.php(526): Doctrine_Import_Mysql->listTables()
  #5 /home/msgcocc/public_html/upgrade.php(45): upgrade_getColumnsForTable(Object(Doctrine_Connection_Mysql), 'modules')
  #6 {main}

  
  
  Sorrry for the inconvience of those who want to see if i've got it working. I'm going to have it back up and running as soon as possible.

  • 
  •  
• mazdev
  
  

  • Rank: Softmore
  • Registered: Sep 13, 2010
  • Posts: 105

  Posted: Dec 29, 2011 - 08:18 AM

  Ok, you got a Jquery.nivo.slider.pack.js and I guess also something like a Jquery.nivo.slider.pack.css.
  
  Now you need to create a folder called "scripts" in your theme and place the Jquery.nivo.slider.pack.js there.
  
  The Jquery.nivo.slider.pack.css you put in YOURTHEME/style/ folder
  
  Now you put in your header before the tag:
  
  

  Code

  <!--[pnpageaddvar name="javascript" value="`$themepath`/scripts/jquery.nivo.slider.pack.js"]-->
  
  <!--[pnpageaddvar name="stylesheet" value="`$themepath`/style/jquery.nivo.slider.pack.css"]-->

  
  
  Also instead of linking to ajax.googles jquery.min.js, you could download it from jquery, place it in your theme/scripts folder
  and link to it as (before closing header tag):
  
  

  Code

  <!--[pnpageaddvar name="javascript" value="`$themepath`/scripts/jquery-1.6.2.min"]-->

  
  
  jquery-1.6.2.min is only an Example, put the version version of the jquery js you got in.
  
  
  
  Edited by mazdev on Dec 30, 2011 - 03:32 AM.
  
  --
  Carl Georg aka Mazdev
  

  Jerindo.net - Ruminations of an Expat in Indonesia & Webdevelopment

  • 
  •  
• mazdev
  
  

  • Rank: Softmore
  • Registered: Sep 13, 2010
  • Posts: 105

  Posted: Jan 02, 2012 - 03:36 PM

  Actually the Nivo Slider will give you a lot of problems with IE.
  
  I tried coin slider and Orbit 1.2.3 all ok, the best and easiest solution for was the Jquery Panel Gallery slider.
  
  You can get it here: http://www.catchmyfa…-2-plugin-released/
  
  You need to do a few things yourself, but it's very easy and light only 8.8 KB
  
  For IE6 I put on top of this Java script a solution to fix the Mouse cursor flickering
  
  

  Code

  //– flickering cursor for IE6 but not IE7, Moz, Safari, Opera…
  try {
      document.execCommand('BackgroundImageCache', false, true);
  }
  catch (e) {/* unless it’s not IE6… */} // if

  
  
  Have Fun
  
  --
  Carl Georg aka Mazdev
  

  Jerindo.net - Ruminations of an Expat in Indonesia & Webdevelopment

  • 
  •  
•  
•  

Users on-line

• craigh,
• mazdev

This list is based on users active over the last 60 minutes.