Slideshow Magic - project seven
12 posts by 5 authors in: Forums > CMS Builder
Last Post: September 18, 2008 (RSS)
By chassa2556 - July 30, 2008
Hi I have a project coming up and I'm wanting to produce a dynamic gallery device which is embedded into the page. So there will be 'child' thumbnails that will then enlarge to the parent large image in the same page. Similar to this product here. http://www.projectseven.com/viewer/index.asp?demo=igm Is there a tried and tested way of doing this with the minimum of hassle or is there a way that this can be done from within the CMSB interface? If not do you think this product would work?
Re: [chassa2556] Slideshow Magic - project seven
I can only add that I have used PVII products for more than 10 years and they are of the very highest quality, if you can integrate their slideshow magic with CMSB then that would probably be a better option than sourcing a.n.other script. For example I would love to be able to get their 'Pop Menu Magic' to work with IT's CMS, that would be really powerful. I guess it can be done but first I need to learn CMSB [:)]
Best Wishes,
Mickey
Best Wishes,
Mickey
Re: [Michael Blake] Slideshow Magic - project seven
By chassa2556 - July 30, 2008
I agree they are fantastic products - even better if they could be integrated into CMSB
Re: [chassa2556] Slideshow Magic - project seven
By Dave - July 30, 2008
Hi Guys,
There's no automatic way to do it with CMS Builder. But if you can figure out how to do it on a plain .html page with really any gallery at all it's usually pretty easy to get CMS Builder to automate the process.
Here's the steps:
1) Figure out how to do your design, or gallery, etc in plain html. Get it working just how you want with static content.
2) Identify the block of code that tells the gallery what images to use. That's the first step. If you can figure that out post that block here so we can see.
3) Look for the pattern in the block of code (a list of image links as an unordered <ul> list, etc). Once we know what the output should look like, and what the pattern is it's often pretty straightforward to output the code with CMS Builder.
Hope that helps!
There's no automatic way to do it with CMS Builder. But if you can figure out how to do it on a plain .html page with really any gallery at all it's usually pretty easy to get CMS Builder to automate the process.
Here's the steps:
1) Figure out how to do your design, or gallery, etc in plain html. Get it working just how you want with static content.
2) Identify the block of code that tells the gallery what images to use. That's the first step. If you can figure that out post that block here so we can see.
3) Look for the pattern in the block of code (a list of image links as an unordered <ul> list, etc). Once we know what the output should look like, and what the pattern is it's often pretty straightforward to output the code with CMS Builder.
Hope that helps!
Dave Edis - Senior Developer
interactivetools.com
interactivetools.com
Re: [chassa2556] Slideshow Magic - project seven
By Kenny - July 30, 2008 - edited: September 17, 2008
This tutorial will show you how to integrate a Gallery using FancyZoom to display thumbnails and transition to full size images when clicked.
You can use many different galleries of similar nature such as lightbox, highslide, etc... It's all pretty much the same. Take the info you learn here and apply accordingly.
In CMSB:
1.Create a Multiple Entry Section Editor called Photos (database = photos)
2.Make the following fields
Album Name textfield album
Date date date
Upload upload pictures (place “Caption" in the info1 box)
3.Make some albums and upload some pictures
In HTML:
1.Download the FancyZoom package, right here:
http://www.cabel.name/2008/02/fancyzoom-10.html
2.Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.
3.Add the following two lines of code to the <head> section at the top of your web page(s):
4. Add onload="setupZoom()" inside your page's existing <body> tag. For example:
5. Create a list viewer page (index.php) linking to each album.
6. Created links to images in your Details page (photos.php) will automatically zoom the images. For example:
The title tag in your href links to your caption (info1). The href for the thumbnails and fullsize image is the same because you are not creating thumbnails. You are just setting the width of the preview image to 100 and it will zoom to full size. You can use CMSB's thumbnail creation as well, just make sure you link the full-size image = $upload['urlPath'] and not $upload['thumbUrlPath']
FancyZoom will use the size of the first element in the href to determine the initial size and location of the zoom.
FancyZoom works best if you wrap your href around a thumbnail, but also works from text-only links to images.
FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.
If you're a Javascript hacker, FancyZoom's flexible fadeIn and fadeOut functions can be used for all sorts of fun stuff.
If you explicitly don't want an image to zoom, add a rel="nozoom" tag to your href.
You can use many different galleries of similar nature such as lightbox, highslide, etc... It's all pretty much the same. Take the info you learn here and apply accordingly.
In CMSB:
1.Create a Multiple Entry Section Editor called Photos (database = photos)
2.Make the following fields
Album Name textfield album
Date date date
Upload upload pictures (place “Caption" in the info1 box)
3.Make some albums and upload some pictures
In HTML:
1.Download the FancyZoom package, right here:
http://www.cabel.name/2008/02/fancyzoom-10.html
2.Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.
3.Add the following two lines of code to the <head> section at the top of your web page(s):
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>4. Add onload="setupZoom()" inside your page's existing <body> tag. For example:
<body onload="setupZoom()">5. Create a list viewer page (index.php) linking to each album.
6. Created links to images in your Details page (photos.php) will automatically zoom the images. For example:
<!-- STEP 2a: Display Uploads for field 'pictures' -->
<?php foreach ($photosRecord['pictures'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info1'] ?>"/>
<img src="<?php echo $upload['urlPath'] ?>" width="100" border="0"/></a>
<?php elseif ($upload['isImage']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info1'] ?>"/>
<img src="<?php echo $upload['urlPath'] ?>" width="100" border="0"/></a>
<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads --> The title tag in your href links to your caption (info1). The href for the thumbnails and fullsize image is the same because you are not creating thumbnails. You are just setting the width of the preview image to 100 and it will zoom to full size. You can use CMSB's thumbnail creation as well, just make sure you link the full-size image = $upload['urlPath'] and not $upload['thumbUrlPath']
FancyZoom will use the size of the first element in the href to determine the initial size and location of the zoom.
FancyZoom works best if you wrap your href around a thumbnail, but also works from text-only links to images.
FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.
If you're a Javascript hacker, FancyZoom's flexible fadeIn and fadeOut functions can be used for all sorts of fun stuff.
If you explicitly don't want an image to zoom, add a rel="nozoom" tag to your href.
Re: [sagentic] Slideshow Magic - project seven
By chassa2556 - July 31, 2008
Many thanks for you time in inputting this walkthrough Sagentic - this is really helpful
Re: [sagentic] Slideshow Magic - project seven
I think I followed your instructions,but my page would argue the point. I put the code in an got an error message. When I pasted in the code from CMS I get the thumbnails, but they do not expand on the click.
Am I correct that I need the code you have included in this post, and that from the CMS db I created?
F-t-T
Am I correct that I need the code you have included in this post, and that from the CMS db I created?
F-t-T
Re: [Frank the Tank] Slideshow Magic - project seven
By Kenny - September 17, 2008
Frank,
Can you post the code here that you included in your page so I can see what you have?
Kenny
Can you post the code here that you included in your page so I can see what you have?
Kenny
Re: [sagentic] Slideshow Magic - project seven
Sure, here's what I've got now.
At the Top:
<?php
require_once "/home2/travisbr/public_html/cms_con/lib/viewer_functions.php";
list($photosRecords, $photosMetaData) = getRecords(array(
'tableName' => 'photos',
));
?>
In <head>: <script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
In the <body> section:
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
The rest: <!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Photo Gallery</h1>
<?php foreach ($photosRecords as $record): ?>
Record Number: <?php echo $record['num'] ?><br/>
Album Name: <?php echo $record['album'] ?><br/>
Date: <?php echo date("D, M jS, Y g:i:s a", strtotime($record['date'])) ?><br/>
<!-- For date formatting codes see: http://www.php.net/date -->
_link : <a href="<?php echo $record['_link'] ?>"><?php echo $record['_link'] ?></a><br/>
<!-- STEP 2a: Display Uploads for field 'upload' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['upload'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />
<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a>
<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->
<hr/>
<?php endforeach; ?>
<?php if (!$photosRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
The code that caused a problem is this, that was posted in this thread:
<!-- STEP 2a: Display Uploads for field 'pictures' -->
<?php foreach ($photosRecord['pictures'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info1'] ?>"/>
<img src="<?php echo $upload['urlPath'] ?>" width="100" border="0"/></a>
<?php elseif ($upload['isImage']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info1'] ?>"/>
<img src="<?php echo $upload['urlPath'] ?>" width="100" border="0"/></a>
<?php else: ?>
<!-- STEP2a: /Display Uploads -->
What I've got now on the page is that the thumbnails are being displayed, but they do not expand to the larger image.
Here's a link to the page: http://www.travisbruce.com/gallery.php
Thanks for your help.
FtF
At the Top:
<?php
require_once "/home2/travisbr/public_html/cms_con/lib/viewer_functions.php";
list($photosRecords, $photosMetaData) = getRecords(array(
'tableName' => 'photos',
));
?>
In <head>: <script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
In the <body> section:
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
The rest: <!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1>Photo Gallery</h1>
<?php foreach ($photosRecords as $record): ?>
Record Number: <?php echo $record['num'] ?><br/>
Album Name: <?php echo $record['album'] ?><br/>
Date: <?php echo date("D, M jS, Y g:i:s a", strtotime($record['date'])) ?><br/>
<!-- For date formatting codes see: http://www.php.net/date -->
_link : <a href="<?php echo $record['_link'] ?>"><?php echo $record['_link'] ?></a><br/>
<!-- STEP 2a: Display Uploads for field 'upload' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: num, createdTime, tableName, fieldName, recordNum, preSaveTempId, filePath, filename, extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['upload'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />
<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" />
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a>
<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->
<hr/>
<?php endforeach; ?>
<?php if (!$photosRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
The code that caused a problem is this, that was posted in this thread:
<!-- STEP 2a: Display Uploads for field 'pictures' -->
<?php foreach ($photosRecord['pictures'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info1'] ?>"/>
<img src="<?php echo $upload['urlPath'] ?>" width="100" border="0"/></a>
<?php elseif ($upload['isImage']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info1'] ?>"/>
<img src="<?php echo $upload['urlPath'] ?>" width="100" border="0"/></a>
<?php else: ?>
<!-- STEP2a: /Display Uploads -->
What I've got now on the page is that the thumbnails are being displayed, but they do not expand to the larger image.
Here's a link to the page: http://www.travisbruce.com/gallery.php
Thanks for your help.
FtF
Re: [Frank the Tank] Slideshow Magic - project seven
By Kenny - September 17, 2008 - edited: September 17, 2008
Frank,
Change the line (my section table and field name)
<?php foreach ($photosRecord['pictures'] as $upload): ?>
to (your section table and field name)
<?php foreach ($record['upload'] as $upload): ?>
in the original code posted above. So your Step 2a code would look like this:
*I had left out a line in the original post and have edited it now
Also, take this out of the Body Section (but leave it in the head section)
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
Let me know if that works for you.
Kenny
Change the line (my section table and field name)
<?php foreach ($photosRecord['pictures'] as $upload): ?>
to (your section table and field name)
<?php foreach ($record['upload'] as $upload): ?>
in the original code posted above. So your Step 2a code would look like this:
<!-- STEP 2a: Display Uploads for field 'upload' -->
<?php foreach ($record['upload'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info1'] ?>"/>
<img src="<?php echo $upload['urlPath'] ?>" width="100" border="0"/></a>
<?php elseif ($upload['isImage']): ?>
<a href="<?php echo $upload['urlPath'] ?>" title="<?php echo $upload['info1'] ?>"/>
<img src="<?php echo $upload['urlPath'] ?>" width="100" border="0"/></a>
<?php endif ?>
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->*I had left out a line in the original post and have edited it now
Also, take this out of the Body Section (but leave it in the head section)
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
Let me know if that works for you.
Kenny