IMAGEMENU IMAGE SLIDERS AND CMSB - Dec 29th, 2018


The sliding menus created with one of the many free versions of Image Menu can create an interesting list page for
displaying albums of images.

The phatfusion version requires at least mootools V 1.1

You can find the latest phatfusion version of the script and all the required plugins at:

http://phatfusion.net/imagemenu/

And there’s a jquery version available at:

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html

You can read more about how they work and the options available on the respective sites.

This recipe will focus on how to adapt these scripts to work with CMS Builder I’m using the Phatfusion version, but
the changes are pretty much the same for the jquery version.

You can download a copy of all the files used in the recipe, including a copy of the layered Photoshop document used to
create the labeled sliding images, from:

http://www.thecmsbcookbook.com/downloads/imagemenu.zip

You can see a working example of sliding menus at:

The first step in adapting Image Menu to CMSB is to create 6 image upload fields in a single record editor (the editor
in this example is called “sliders” and the fields are called slider_1 through slider_6. The thumbnail size is set
for 320px wide and 300 px high.)

You can create your “sliders” editor using the sliders.ini.php file included in the zip file. Just copy it to your
cmsAdmin>data>schemaPresets folder and then select it from the “select presets” menu when creating your new editor.


Here’s the code required in the head of your sliding_images.php viewer:


<!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">
<head>
<title>Welcome to My Photography Web Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="_common/css/imageMenu.php" />

<script type="text/javascript" src="_common/scripts/mootools.js"></script>
<script type="text/javascript" src="_common/scripts/imageMenu.js"></script>

</head>
<body>

<div id="container">
<div id="imageMenu">
<ul>

<li class="slider_1"><a href="gallery1.php"></a></li>
<li class="slider_2"><a href="gallery2.php"></a></li>
<li class="slider_3"><a href="gallery3.php"></a></li>
<li class="slider_4"><a href="gallery4.php"></a></li>
<li class="slider_5"><a href="gallery5.php"></a></li>
<li class="slider_6"><a href="gallery6.php"></a></li>
</ul>
</div>
<script type="text/javascript">

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
<div class="clear"></div>


</div></body></html>


The other customized file is the _common/css/imageMenu.php file (originally the imageMenu.css file) (Don’t forget to
change the path to your viewer_functions.php to match your server).

Here’s the code:


<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "/path_to_your/cmsAdmin/lib/viewer_functions.php";

list(
$slidersRecords, $slidersMetaData) = getRecords(array(
'tableName' => 'sliders',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$slidersRecord = @$slidersRecords[0]; // get first record

// show error message if no matching record is found
if (!$slidersRecord) {
print
"Record not found!";
exit;
}

?>
<?php
header("Content-type: text/css");
?>

#imageMenu {
position: relative;
left:50px;
width: 800px;
height: 300px;
overflow: hidden;
}

#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 300px;
width: 1000px;

}

#imageMenu ul li {
float: left;
}

#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:135px;
height: 300px;
}

#imageMenu ul li.slider_1 a {
background: url(<?php foreach ($slidersRecord['slider_1'] as $upload): ?>
<?php echo $upload['thumbUrlPath2'] ?><?php endforeach ?>) repeat scroll 0%;
}

#imageMenu ul li.slider_2 a {
background: url(<?php foreach ($slidersRecord['slider_2'] as $upload): ?>
<?php echo $upload['thumbUrlPath2'] ?><?php endforeach ?>
) repeat scroll 0%;
}
#imageMenu ul li.slider_3 a {
background: url(<?php foreach ($slidersRecord['slider_3'] as $upload): ?>
<?php echo $upload['thumbUrlPath2'] ?><?php endforeach ?>) repeat scroll 0%;
}
#imageMenu ul li.slider_4 a {
background: url(<?php foreach ($slidersRecord['slider_4'] as $upload): ?>
<?php echo $upload['thumbUrlPath2'] ?><?php endforeach ?>) repeat scroll 0%;
}

#imageMenu ul li.slider_5 a {
background: url(<?php foreach ($slidersRecord['slider_5'] as $upload): ?>
<?php echo $upload['thumbUrlPath2'] ?><?php endforeach ?>) repeat scroll 0%;
}

#imageMenu ul li.slider_6 a {
background: url(<?php foreach ($slidersRecord['slider_6'] as $upload): ?>
<?php echo $upload['thumbUrlPath2'] ?><?php endforeach ?>) repeat scroll 0%;
border-right: 2px solid #fff;

}

.clear {
clear: both;
}



The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service