Gallery for Featured Photos
7 posts by 2 authors in: Forums > CMS Builder
Last Post: March 23, 2015 (RSS)
By noahtheark - March 15, 2015
Hello everybody
So what I want to do is have a simple fading sliding image gallery using this code (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm) which the images would be pulled from a listing called Featured Photo which all houses have on their listing, and it would link to that specific house depending on which image is displayed.
How I have it set up in the CMSB is under the Section Editors > Listings > I have a new Field Label named Featured Photo and Field Name is
featured_photo and field type is upload and Upload Fields info1 is Title and info2 is Caption.
Then when you go to listings and click modify for a house, you scroll down to the end where you can upload a photo for the Featured Photo for that specific house.
Each house would have a feature photo and I would like to display them in a fading gallery which would pull from the featured photo sections of each house and would be able
to click on them and link to their corresponding page.
This is the code I am trying to use inside the CMSB.
<?php
// load viewer library
$libraryPath = 'amcms/lib/viewer_functions.php';
$dirsToCheck = array('','/','../','../../','../../../','../../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
if (!@$GLOBALS['GEOCODER_PLUGIN']) { die("You must activate the Geocoder plugin before you can access this page."); }
// get records
list($myRecords, $myMetaData) = getRecords(array(
'tableName' => "listings",
));
?>
<!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>
<link rel="stylesheet" type="text/css" href="style_1.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- optional touchswipe file to enable swipping to navigate slideshow -->
<script type="text/javascript" src="code/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="code/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["img/pool.jpg","http://www.linktohousepage1.php", "_top"],
["img/cave.jpg","http://www.linktohousepage2.php", "_top"],
["img/fruits.jpg","http://www.linktohousepage3.php", "_top"],
["img/dog.jpg","http://www.linktohousepage4.php", "_top"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})
</script>
<script type="text/javascript" src="code/over.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapCanvasId = 'map_canvas';
var mapOptions = { center: new google.maps.LatLng(39.0319389, -94.5304009),
zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
<?php
foreach ($myRecords as $record) {
if (!$record['latitude'] || !$record['longitude']) { continue; }
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "'";
print " _geocoder_addMarker($jsFunctionArgs);\n";
}
?>
//
function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) {
var latLng = new google.maps.LatLng(latitude, longitude);
var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
var marker = new google.maps.Marker({ map: map, position: latLng });
google.maps.event.addListener(marker, 'click', function() {
if (infowindowEl) {
infowindow.setContent(infowindowEl.innerHTML);
infowindow.open(map, marker);
}
else {
window.location = detailLink;
}
});
}
}
</script>
</head>
<body bgcolor="#8d8d8d" topmargin="0" marginheight="0" onload="initialize()">
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src="img/nien.gif" width="1" height="20" alt="">
<table cellspacing="0" cellpadding="0" border="0" width="945" bgcolor="#ffffff">
<tr>
<td><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="618" height="132"><a href="index.php"><img src="img/logo_top.gif" width="618" height="132" border="0" alt=""></a></td>
<td width="327">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3"><img src="img/address.gif" width="327" height="66" alt=""></td>
</tr>
<tr>
<td colspan="3"><a href="mailto:333rent@stewardshipllc.com" onmouseover="buttondown('emailbutton')" onmouseout="buttonup('emailbutton')"><img src="img/email_0.gif" width="313" height="26" alt="" border="0" name="emailbutton"></a></td>
</tr>
<tr>
<td><img src="img/blank_social.gif" width="260" height="40" alt=""></td>
<td><a href="https://twitter.com/333Rent_KC" onmouseover="buttondown('twitterbutton')" onmouseout="buttonup('twitterbutton')"><img src="img/twitter_0.gif" width="28" height="40" alt="" border="0" name="twitterbutton"></a></td>
<td><a href="https://www.facebook.com/333rent" onmouseover="buttondown('facebookbutton')" onmouseout="buttonup('facebookbutton')"><img src="img/facebook_0.gif" width="39" height="40" alt="" border="0" name="facebookbutton"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="945" height="133" bgcolor="#ffffff">
<tr>
<td>
<img src="img/nien.gif" width="1" height="14" alt="">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="14"></td>
<td valign="top" width="628">
<TABLE WIDTH="100" BORDER="0" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD class="tdMainImageCell">
<div id="fadeshow1"></div></TD>
</TR>
</TABLE>
</BODY>
</HTML>
This works handcoded, but I would like to have it work within the CMSB so it can be easily updated.
I have uploaded pictures of the backend to show you how I set that up.
Thank you for your help.
By Damon - March 16, 2015
Hi,
Try replacing this code:
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["img/pool.jpg","http://www.linktohousepage1.php", "_top"],
["img/cave.jpg","http://www.linktohousepage2.php", "_top"],
["img/fruits.jpg","http://www.linktohousepage3.php", "_top"],
["img/dog.jpg","http://www.linktohousepage4.php", "_top"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})
</script>
with this code:
<script type="text/javascript">
<?php $total_records = $listingsMetaData['totalRecords']; ?>
<?php $counter = 0; ?>
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
<?php foreach ($listingsRecords as $record): ?>
<?php $counter++; ?>
<?php foreach ($record['featured_photo'] as $index => $upload): ?>
["<?php echo htmlencode($upload['urlPath']) ?>", "<?php echo $record['_link'] ?>", "_top"]<?php if($counter != $total_records) echo ", \n"; ?>
<?php endforeach ?>
<?php endforeach ?>
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})
</script>
I had to get the totalRecords and use a counter only add a comma if there was additional records to output.
Let me know how this works for you.
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By noahtheark - March 16, 2015
Thanks for helping me out with my photo gallery.
Unfortunately the new script does not work for some reason, it does not show any images on the page.Here are the two different version on the website below.
The first one works, but thats just using the handcoded images.
http://kansashousebuyers.com/slidetest1.php
This is the new one with the changes you suggested, but no images are coming through.
http://kansashousebuyers.com/slidetest2.php
I have attached both files as well.
Not sure if I am doing something wrong here or not, but thanks for the help you are providing.
By Damon - March 17, 2015
Hi,
I see the issue. I wasn't using your array names: $myRecords, $myMetaData
Try this:
<script type="text/javascript">
<?php $total_records = $myMetaData['totalRecords']; ?>
<?php $counter = 0; ?>
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
<?php foreach ($myRecords as $record): ?>
<?php $counter++; ?>
<?php foreach ($record['featured_photo'] as $index => $upload): ?>
["<?php echo htmlencode($upload['urlPath']) ?>", "<?php echo $record['_link'] ?>", "_top"]<?php if($counter != $total_records) echo ", \n"; ?>
<?php endforeach ?>
<?php endforeach ?>
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})
</script>
Please let me know if this works for you.
Thanks!
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By noahtheark - March 22, 2015 - edited: March 23, 2015
Yes this code worked, Thank you very much!
Sorry it took so long to reply back, was working on some more of the site.
Edit
I fixed the issues by adding charset="utf-8" to the javascript code/fadeslideshow.js, weird, but it worked :)
Is their a way to add a descrption for the featured images like they have in the example below.
I think their is some way when uploading to add a description in one of the extra fields, but not sure how that works.
imagearray: [
["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/1.jpg", "", "", "There is beauty to be found in nature not just in grand landscapes, but in the petals of an unassuming flower"],
["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/3.jpg", "", "", "The iconic telephone booths of London now in a very unfamiliar place."],
["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/7.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/4.jpg", "", "", "Alone and being lonely. It's a state of mind. Which one does this image evoke in you?"] //<--no trailing comma after very last image element!
This is a different question but in the Admin > Section Editors their is a Drag field where you can move the columns around.
Is their anyway to add that feature to the Listings section so I can rearrange the houses where I want them?
Thanks!
By Damon - March 23, 2015
Hi,
I checked this page on the Chrome, Firefox and Safari using Windows and the images appeared for me:
http://kansashousebuyers.com/home_detail.php?12708-7th-St-2
If you run a HTML Validator on the page it will show some errors in the HTML which could cause some issues. For example around the image there is missing closing divs. This shouldn't cause the images to not load though.
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By Damon - March 23, 2015
You can display upload image caption text using this publish code:
<?php echo htmlencode($upload['info1']) ?>
If you add this into the code it should work. If it doesn't, compare the results (view browser page source) with a working version (page source) to see where the code is the same and different.
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/