Gallery for Featured Photos

7 posts by 2 authors in: Forums > CMS Builder
Last Post: March 23, 2015   (RSS)

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.

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

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.

Attachments:

slidetest1.php 6K

slidetest2.php 6K

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!

Cheers,
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.

Cheers,
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.

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/