Help with Step Carousel Viewer script

Hi, I'm using DD's Step Carousel Viewer script to create a photo viewer. You can find the complete code with examples here:
http://www.dynamicdrive.com/dynamici...epcarousel.htm

I was going to contact the script author directly to ask him (or her) this question, but there's no email address associated with the script and he mentioned he checks the boards daily so I figured I'd post the question. Please refer to the link above to view the code for easiest reference.

I'm using the Carousel function as a thumbnail viewer rather than for viewing the full-sized images. A user can scan through the thumbnails with either the one-by-one function or the jump-ahead function (I've set it to jump 5 ahead). Once the user finds a thumbnail they're interested in viewing they click on the image and the full-sized image is targeted to an iFrame on the page. Everything works beautifully, but because I'm using this as a thumbnail viewer I'm wondering if it's possible to add another piece of functionality whereas a user could flip through the thumbnail images one-by-one by clicking a forward button and with each click the corresponding full-sized image would also come up, which could be targeted to a div on the page or a pop-up window or an iFrame?
The closest example of what I'm thinking of can be viewed here:
http://www.openhomesphotography.com/235Berry/
Click on Gallery
It's a flash site, but it seems that the Carousel script is very close to achieving the same sort of functionality.

I realize this is probably taking the Carousel script in a direction that it wasn't intended for, but I thought I'd ask if this is something even possible. I prefer to use DHTML over flash whenever possible.

Thanks for your thoughts and (to the author) the great script!
Greg

You should be able to do this easily using the onslide event handler of the script (see explanation of it here). You might end up with something like:

Code:

---

stepcarousel.setup({
galleryid: 'galleryA', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:300, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
statusvars: ['pointA', 'pointB', 'pointC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
oninit:function(){
 myiframe=document.getElementById('myiframe') //reference IFRAME
},
onslide:function(){
 myiframe.setAttribute("src", largeimages[pointA-1])
}
})

---

I'm not sure where you're storing the URLs to the enlarged images, so the above just assumes they are stored in a JavaScript array called largeimages[].

thanks for the response. i went ahead and added the code, but i'm not seeing any difference. was i supposed to add something else? i was thinking there might be another link or button for advancing the slides that would also bring up a larger image.

Do you have a link to the problem page? The code I posted is just a working example of what you should do, but exactly what you'd do depends on how everything is set up on your site.

http://www.divinia.com/sequitur/hous...chalkhill.html

the image on the page is the area where the iFrame is that Carousel is targeting.

the "previous/next" in the upper right corner are the buttons i'd like to have flip through the images.

i was just looking at DHTML Slide Show Script as a possible better way to do this. unfortunately i couldn't figure out how to target the iFrame using this script so i'm not sure what to do now.

thanks for taking a look at this.

Looking at your page, it seems your iframe contains a blank page that in itself contains one single image, for example: http://www.divinia.com/sequitur/houseloft/main.html Do you intend to have separate pages for each thumbnail, each containing a single enlarged image? Or are you sticking with a single main.html page, and just want to change the image within it to the enlarged version of each thumbnail?

the second option -- one page and changing the image within that page

Ok, try something like the below configuration code (replacing what you have right now on the page):

Code:

---

<script type="text/javascript">

var largeimages=[]
largeimages[0]="large1.gif"
largeimages[1]="large2.gif"
largeimages[2]="large3.gif"
largeimages[3]="large4.gif"

stepcarousel.setup({
        galleryid: 'mygallery', //id of carousel DIV
        beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
        panelclass: 'panel', //class of panel DIVs each holding content
        panelbehavior: {speed:500, wraparound:false, persist:true},
        defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/minus.gif', -30, 16], rightnav: ['images/plus.gif', 16, 16]},
        statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
        contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
        oninit:function(){
        myiframeimg=window.frames["main"].document.getElementsByTagName("img")[0] //reference 1st image within iframe "main" on page
        },
        onslide:function(){
        myiframeimg.setAttribute("src", largeimages[statusA-1])
        }

})

</script>

---

This is only a proof of concept. Change the image paths referenced inside largeimages[] to working examples. Then as you step through the Carousel, the IFRAME should be dynamically populated with the enlarged image specified based on its order.

hey it works! thanks again for your help and the script, it's the best and most flexible i've found out there for creating your own image gallery. kudos!
also, i'd like to deepen my knowledge of javascript, any tutorials or books you'd recommend?

oops two problems, it's not working in Safari, any ideas? also a bigger problem is that it's not possible to continue to view larger images with the (+) sign once the carousel gets to the end (the plus sign fades). i've uploaded the page so you can see what's going on. do you think this is the right way to handle this viewer, or do you think it might be best to leave the carousel as is and use the DHTML Slide Show Script and use the "previous/next" links i have on top of the image? and can you even target an iFrame with that script?

If all you're doing is showing an enlarged image inside the IFRAME, it doesn't make sense to use an IFRAME at all, but just a regular DIV on the page. Anyhow, I've constructed a fully working example that's inspired by what you're trying to do on your page. Let me know if that's a better approach for you:

Code:

---

<!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" lang="en" xml:lang="en">

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="stepcarousel.js">

/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 570px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>

<body>

<script type="text/javascript">

stepcarousel.setup({
        galleryid: 'mygallery', //id of carousel DIV
        beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
        panelclass: 'panel', //class of panel DIVs each holding content
        autostep: {enable:true, moveby:1, pause:3000},
        panelbehavior: {speed:500, wraparound:true, persist:true},
        defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
        statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
        contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
        oninit:function(){
                enlargeddiv=document.getElementById("enlargedarea")
                thumbnails=document.getElementById("mygallery").getElementsByTagName("a")
        },
        onslide:function(){
                enlargeddiv.innerHTML='<img src="'+thumbnails[statusA-1]+'" border="0" />'
        }
})

</script>

<div id="enlargedarea" style="border:1px solid black; background:lightyellow; padding:5px; width:700px; height:200px"></div>

<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="http://i30.tinypic.com/531q3n.jpg"><img src="http://i30.tinypic.com/531q3n.jpg" /></a>
</div>

<div class="panel">
<a href="http://i30.tinypic.com/xp3hns.jpg"><img src="http://i29.tinypic.com/xp3hns.jpg" /></a>
</div>

<div class="panel">
<a href="http://i30.tinypic.com/11l7ls0.jpg"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></a>
</div>

<div class="panel">
<a href="http://i30.tinypic.com/119w28m.jpg"><img src="http://i31.tinypic.com/119w28m.jpg" /></a>
</div>

<div class="panel">
<a href="http://i30.tinypic.com/34fcrxz.jpg"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></a>
</div>

</div>
</div>

<p>
<b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span><br />

<a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a> <br />

<a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>

</p>

---