Author Topic: Minislider (not) showing (Read 14071 times)

RonK · « **on:** August 03, 2018, 01:17:42 PM »

Hi,

Lately I have upgraded a website from WB2.8.3 Sp1 to the latest version, WB2.12.
The module "capslider" didn't work anymore and I found a note I better use "minislider" instead.

Loaded and edit Minislider.
And then nothing was shown.
There is a an error message:

Code: [Select]

frontend.js:9 Uncaught ReferenceError: $ is not defined
(anonymous) @ frontend.js:9

So I have added a test page with the module and a default WB template (WebsiteBaker Default Template v1.0.4.dev2)
Here the slider is shown.

I have red another post about jquery.js being loaded twice. I think that is not the case here (or I must have missed it).

Because is site is developed locally, I do not have an URL to go to, to show you the problem.

This is the index.php file of the not working slider:

Code: [Select]

<?php
/**
 * $Id: index.php 1106 2009-08-06 16:07:39Z Ruebenwurzel $
 * Website Baker template: simple, adpated for Overkant
 * This template is one of four basis templates distributed with Website Baker.
 * Feel free to modify or build up on this template.
 *
 * This file contains the overall template markup and the Website Baker
 * template functions to add the contents from the database.
 *
 * LICENSE: GNU General Public License
 * 
 * @author     Ryan Djurovich, C. Sommer, changed by Ron Kraaijkamp
 * @copyright  GNU General Public License
 * @license    http://www.gnu.org/licenses/gpl.html
 * @version    2.70
 * @platform   Website Baker 2.7
 *
 * Website Baker is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Website Baker is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
*/

// prevent this file from being accessed directly
if (!defined('WB_PATH')) die(header('Location: ../../index.php'));

// TEMPLATE CODE STARTS BELOW
?>
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php 
	echo defined('DEFAULT_CHARSET') ? DEFAULT_CHARSET : 'utf-8'; ?>" />
	<meta name="description" content="<?php page_description(); ?>" />
	<meta name="keywords" content="<?php page_keywords(); ?>" />
	<?php
	// automatically include optional WB module files (frontend.css, frontend.js)
	if (function_exists('register_frontend_modfiles')) {
		register_frontend_modfiles('css');
		register_frontend_modfiles('js');
        register_frontend_modfiles('jquery');
	}
    ?>
	<link rel="stylesheet" type="text/css" href="<?php
		echo TEMPLATE_DIR; ?>/template.css" media="screen,projection" />
	<link rel="stylesheet" type="text/css" href="<?php
		echo TEMPLATE_DIR; ?>/print.css" media="print" />
	<title><?php page_title('', '[WEBSITE_TITLE]'); ?></title>


<!-- Script used for showslider aka capslider for picture banner -->
<!-- <script type="text/javascript" src="<?php echo WB_URL; ?>/include/jquery/jquery-min.js"></script> -->

</head>

<body>

<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
	<td class="header" height="100" width="400">
        <!-- Logo in css file -->
	</td>
    <td class="menu">
      <?php
      if (SHOW_MENU2) {
      	// navigation menu
      	show_menu2(1,0,1,true,'[a]|[menu_title][/a]&nbsp;','','<ul>&nbsp;','</ul>');
      } ?>
     </td>
</tr>
<tr>
	<td colspan="2" class="devider">
	</td>
</tr>
<tr>
	<td colspan="2" class="content">
        <?php echo '<H1>',page_title('','[PAGE_TITLE]'),'</H1>'; ?>
        <br />
        <?php page_content(); ?>
	</td>
</tr>
<tr>
	<td colspan="2" class="extrainfo">
<!--		<?php page_footer(); ?>   -->
        <table width="1019" bgcolor="#3C3C3C" cellpadding="10">
          <tr>
            <td valign="top" width="25%" class="extrainfo">
            <p>[[SectionPicker?sid=24]]</p>                            <!-- pagina: Extra Info Onder Links -->
            </td>
            <td valign="top" width="25%" class="extrainfo">
            <p>[[SectionPicker?sid=25]]</p>                            <!-- pagina: Extra Info Onder Links Midden-->
            </td>
            <td valign="top" width="25%" class="extrainfo">
            <p>[[SectionPicker?sid=27]]</p>                            <!-- pagina: Extra Info Onder Rechts Midden -->
            </td>
            <td valign="top" width="25%" class="extrainfo">
            <p>[[SectionPicker?sid=26]]</p>                            <!-- pagina: Extra Info Onder Rechts -->
            </td>
          </tr>
        </table>
	</td>
</tr>

<tr>
	<td colspan="2">
        &nbsp;
	</td>
</tr>

<tr>
    <td colspan="2" class="footer">
                [[ModifiedWhen]]&nbsp;&nbsp;&nbsp;&copy; Stichting "de Overkant" en <a href="http://www.2rsweb.nl/pages/nederlands-dutch/hobby/websites-bouwen.php" target="_blank">2RSweb.nl</a>
    </td>
</tr>
</table>
<?php
// automatically include optional WB module file frontend_body.js)
if (function_exists('register_frontend_modfiles_body')) { register_frontend_modfiles_body(); }
?>
</body>
</html>

And here is a part of source view of the page:

Code: [Select]

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="Voetveer De Overkant, Ameide - Lopik" />
	<meta name="keywords" content="Voetveer "De Overkant" Ameide Lopik" />
		<link rel="stylesheet" href="/modules/WBLingual/frontend.css" media="screen" />
	<link rel="stylesheet" href="/modules/minislider/frontend.css" media="screen" />
	<script>
		/* inserted by register_frontend_modfiles */
		var URL = 'http://localhost';
		var WB_URL = 'http://localhost';
		var THEME_URL = 'http://localhost/templates/DefaultTheme';
		var TEMPLATE_DIR = 'http://localhost/templates/Overkant';
		var TEMPLATE = 'Overkant';
		var EDITOR = 'ckeditor';
</script>
	<script src="/include/jquery/domReady-min.js"></script>
	<script src="/include/jquery/LoadOnFly-min.js"></script>

	<script src="/modules/minislider/frontend.js"></script>

	<script src="/include/jquery/jquery-min.js"></script>
	<script src="/include/jquery/jquery-migrate-min.js"></script>
	<script src="/include/jquery/jquery-insert.js"></script>
	<script src="/include/jquery/jquery-include.js"></script>
	<script src="/include/jquery/jquery_theme.js"></script>
	<script src="/include/jquery/jquery-ui-min.js"></script>
	<script src="/include/jquery/jquery_frontend.js"></script>

	<link rel="stylesheet" type="text/css" href="/templates/Overkant/template.css" media="screen,projection" />
	<link rel="stylesheet" type="text/css" href="/templates/Overkant/print.css" media="print" />
	<title>Voetveer De Overkant, Ameide - Lopik</title>


<!-- Script used for showslider aka capslider for picture banner -->
<!-- <script type="text/javascript" src="/include/jquery/jquery-min.js"></script> -->

	<script src="/modules/output_filter/js/mdcr.js"></script>
</head>

<body>

<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
	<td class="header" height="100" width="400">
        <!-- Logo in css file -->
	</td>
    <td class="menu">
      <ul>&nbsp;<a href="http://localhost" target="_top" rel="noopener" title="Home">|Home</a>&nbsp;<a href="/pages/vaartijden.php" target="_top" rel="noopener" title="Vaartijden">|Vaartijden</a>&nbsp;<a href="/pages/tarieven.php" target="_top" rel="noopener" title="Tarieven">|Tarieven</a>&nbsp;<a href="/pages/fotoalbum.php" target="_top" rel="noopener" title="Fotoalbum">|Fotoalbum</a>&nbsp;<a href="/pages/fietsroutes.php" target="_top" rel="noopener" title="Fietsroutes">|Fietsroutes</a>&nbsp;<a href="/pages/links.php" target="_top" rel="noopener" title="Links">|Links</a>&nbsp;<a href="/pages/sponsors.php" target="_top" rel="noopener" title="Sponsors">|Sponsors</a>&nbsp;<a href="/pages/test.php" target="_top" rel="noopener" title="Test">|Test</a>&nbsp;</ul>     </td>
</tr>
<tr>
	<td colspan="2" class="devider">
	</td>
</tr>
<tr>
	<td colspan="2" class="content">
        <H1>Home</H1>        <br />
        
<div id="wb_41" class="section m_minislider" >

<div class="slider-wrapper theme-default"><div class="ribbon"></div><div id="slider" class="nivoSlider">    <img src="/media/minislider/41/1.jpg" data-transition="fade" title="1" alt="" />    <img src="/media/minislider/41/2.jpg" data-transition="fade" title="2" alt="" />    <img src="/media/minislider/41/3.jpg" data-transition="fade" title="3" alt="" />    <img src="/media/minislider/41/4.jpg" data-transition="fade" title="4" alt="" /></div></div>
</div><!-- minislider41 -->

With this template index.php file it is working:

Code: [Select]

<?php
/**
 * $Id: index.php 2 2017-07-02 15:14:29Z Manuela $
 * Website Baker template: allcss
 * This template is one of four basis templates distributed with Website Baker.
 * Feel free to modify or build up on this template.
 *
 * This file contains the overall template markup and the Website Baker
 * template functions to add the contents from the database.
 *
 * LICENSE: GNU General Public License
 *
 * @author     Ryan Djurovich, C. Sommer
 * @copyright  GNU General Public License
 * @license    http://www.gnu.org/licenses/gpl.html
 * @version    2.70
 * @platform   Website Baker 2.7
 *
 * Website Baker is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Website Baker is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
*/
/* -------------------------------------------------------- */
// Must include code to stop this file being accessed directly
if (!defined('SYSTEM_RUN')) {header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found'); echo '404 File not found'; flush(); exit;}
/* -------------------------------------------------------- */
ob_start();  //fetch MainContent
page_content(1);
$page_contentMain = \ob_get_clean();
ob_start();  //fetch original header content
page_content(2);
$page_contentTeaser = \ob_get_clean();
ob_start();  //fetch original header content
page_content(3);
$page_contentSidebar = \ob_get_clean();
$sPageLang    = strtolower(isset($wb->page) || ($wb instanceof frontend) ? $wb->page['language'] : 'EN');
$iPageId = (defined('PAGE_ID') ? PAGE_ID : 0);

// TEMPLATE CODE STARTS BELOW
?><!DOCTYPE HTML>
<html lang="<?php echo $sPageLang; ?>">
<head>
    <meta charset="utf-8" />
    <title><?php page_title('', '[WEBSITE_TITLE]'); ?></title>
    <meta name="description" content="<?php page_description(); ?>" />
    <meta name="keywords" content="<?php page_keywords(); ?>" />
    <meta name="robots" content="noodp" />
    <meta name="referrer" content="same-origin" />
    <!-- Mobile viewport optimisation -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/3/w3.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/screen.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/print.css" media="print" />
    <link rel="canonical" href="[wblink<?php echo $iPageId;?>]"/>
    <link rel="shortcut icon" href="<?php echo TEMPLATE_DIR; ?>/images/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="<?php echo TEMPLATE_DIR; ?>/images/apple-touch-icon.png"/>
<!--
    <link rel="alternate" type="application/rss+xml" title="Test RSS-Feed" href="<?php echo WB_URL; ?>/modules/news/rss.php?page_id=??" />
-->
<?php
if (!function_exists('LangPadeId')) {function LangPadeId(){return $iPageId;}}
// to show flags in frontend
    $iMultiLang = 0;$sMultiLang = ''; if (function_exists('language_menu')){$sMultiLang = language_menu('png',false); $iMultiLang = intval(!empty($sMultiLang) ? 1 : 0);}
    if (function_exists('LangPadeId')&&$iMultiLang) {
?>
<!--
    <link rel="alternate" hreflang="x-default" href="[wblink<?php echo LangPadeId($sPageLang);?>]" />
    <link rel="alternate" hreflang="de" href="[wblink<?php echo LangPadeId('DE');?>]" />
    <link rel="alternate" hreflang="en" href="[wblink<?php echo LangPadeId('EN');?>]" />
-->
<?php
    }
// automatically include optional WB module files (frontend.css)
    register_frontend_modfiles('css');
// if function LangPadeId doesn't exists, you have to upgrade WBLingual Switcher Add-on to latest version'
// automatically include optional WB module files (frontend.js, jQuery) enable OldModFiles in OutputFilter
    register_frontend_modfiles('jquery');?>
<?php    register_frontend_modfiles('js'); ?>
    <script id="headjs" src="<?php echo TEMPLATE_DIR; ?>/js/head.js"></script>
</head>
<body class="allcssRes gradient-sweet-home">
<?php if (function_exists('cookie_permission')){cookie_permission();} ?>
<div id="allcssRes-wrapper" class="main outer-box ">
    <header >
        <div class="banner gradient">
            <a class="h1" href="<?php echo WB_URL; ?>/" target="_top"><?php page_title('', '[WEBSITE_TITLE]'); ?></a>
            <span class="h1">| <?php page_title('', '[PAGE_TITLE]'); ?></span>
        </div>
    <!-- frontend search -->
    <div class="search_box gradient round-top-left round-top-right">
<?php
        // CODE FOR WEBSITE BAKER FRONTEND SEARCH
if (SHOW_SEARCH) { ?>
    <form id="search" action="<?php echo WB_URL; ?>/search/index.php" method="get" >
        <input type="hidden" name="referrer" value="<?php echo defined('REFERRER_ID') ? REFERRER_ID : $iPageId; ?>" />
        <input type="text" name="string" class="search_string" />
        <input type="submit" name="wb_search" id="wb_search" value="<?php echo $TEXT['SEARCH']; ?>" class="search_submit" />
    </form>
<?php } ?>
    </div>
    </header>
<?php if(trim($page_contentTeaser)!=''){ ?>
        <div class="teaser">
          <div class="content">
          <?php echo $page_contentTeaser; ?>
          </div><!-- content -->
        </div><!-- teaser -->
<?php } ?>
    <input type="checkbox" id="open-menu" />
    <label for="open-menu" class="open-menu-label">
        <span class="title h4"> <?php page_title('', '[PAGE_TITLE]'); ?></span>
        <span class="fa fa-bars" aria-hidden="true">&#160;</span>
    </label>

    <div id="lang" style="height: 2.925em;">
<?php if(trim($sMultiLang)!=''){ ?>
<?php echo $sMultiLang; ?>
<?php } ?>
    </div>

    <div id="left-col">
      <div class="content">
        <!-- main navigation menu -->
      [[iEditThisPage?show=1]]
        <nav class="outer-box gradient-sweet-home">
            <div class="menu" style="font-size: 86%;">
<?php
        echo show_menu2(SM2_ALLMENU, SM2_ROOT+$iMultiLang, SM2_CURR+1, SM2_TRIM|SM2_BUFFER|SM2_PRETTY|SM2_NUMCLASS,'<li><span class="menu-default">[ac][menu_title]</a></span>','</li>','<ul>','</ul>');
?>
            </div>
        </nav>

<?php if(trim($page_contentSidebar)!=''){ ?>
      <div class="left-content outer-box gradient-sweet-home">
            <?php echo $page_contentSidebar; ?>
      </div>
<?php } ?>
<?php if (defined('FRONTEND_LOGIN') && FRONTEND_LOGIN){ ?>
        <div class="outer-box gradient-sweet-home">
             [[LoginBox]]
        </div>
<?php } ?>
      </div><!-- content -->
    </div><!-- left-col -->

    <div class="main-content">

        <?php echo $page_contentMain; ?>
    </div>

    <footer>
    <div class="footer">
        <?php page_footer(); ?>
    </div>
    </footer>

</div>

<div class="powered_by">
    Powered by <a href="http://WebsiteBaker.org" target="_blank" rel="noopener" >WebsiteBaker</a>
<?php if (function_exists('cookie_permission')){ ?>
    <div style="margin: 5px auto; padding-bottom: 20px;"><strong>Cookie-Erlaubnis</strong> widerrufen:
        <a title="Cookies nicht mehr erlauben" href="?cookiereset">Zurücksetzen</a></div>
    </div>
<?php } ?>
</div>
<?php
// if you want to include jquery before body end,
#register_frontend_modfiles_body('jquery');
// automatically include optional WB module file frontend_body.js) should be always set
register_frontend_modfiles_body('js');
?>
    <script id="bodyjs" src="<?php echo TEMPLATE_DIR; ?>/js/body.js"></script>
</body>
</html>

I wonder what I am missing, doing wrong or even done twice.

dbs · « **Reply #1 on:** August 03, 2018, 01:59:54 PM »

Hi, the order of the loaded scripts is important.
Move this line

Code: [Select]

register_frontend_modfiles('jquery');above the line

Code: [Select]

register_frontend_modfiles('js');
It should looks like:

Code: [Select]

// automatically include optional WB module files (frontend.css, frontend.js)
	if (function_exists('register_frontend_modfiles')) {
		register_frontend_modfiles('css');
                register_frontend_modfiles('jquery');
		register_frontend_modfiles('js');

Hope it helps.

RonK · « **Reply #2 on:** August 03, 2018, 09:20:03 PM »

Hallo dbs,

that helped indeed.
Learning every day. Thank you for your help.

Interesting site you build. Will bookmark it.

Regards,
Ron

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: Minislider (not) showing (Read 14071 times)

RonK

Minislider (not) showing

dbs

Re: Minislider (not) showing

RonK

Re: Minislider (not) showing