PDA

View Full Version : Multiple carousel viewers on page or load carousel viewer pages via ajax?



slowCode
08-11-2008, 03:02 AM
1) Script Title: Step Carousel Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:

I'm new to this, and have been searching for an answer on the forums to no avail. Is it possible to get multiple carousel viewers on the same page? I think that is what I need to do to accomplish my goal.

What I am trying to do is create a page that has several links on it. Each link would take you to a different carousel viewer with relevant images.

I have tried a couple different approaches with no luck. I tried to load a carousel viewer page (that worked on it's own) into a main page using ajax but the carousel viewer didn't work when I did that.

Since that didn't work, my thought is that maybe I need to just create multiple divs on the same page with a carousel viewer in each div. Then I could hide/show the div's when the links are clicked. Not sure if this is the best approach - and I am a bit concerned about performance - but I don't have any other ideas at this point.

Any help would be greatly appreciated!

jscheuer1
08-12-2008, 02:44 PM
Though deprecated in strict HTML, iframe and target are still valid in transitional. This would seem to be a job for those. You can put an iframe on your top page and have the various carousels each on separate pages. Have the links href to these pages and target the iframe. Something like:


<iframe name="carousels" src="carousel_1.htm" frameborder=0 width=300 height=250 scrolling="auto"></iframe>

and:


<a href="carousel_2.htm" target="carousels">Second Carousel</a>

Set the width and height of the iframe to about the width and height of the carousels, a little larger. On the various carousel_X.htm pages, have only one carousel on each of them, and set the style:


body {
margin:0;
padding:0;
}

to prevent it looking off center in the iframe in some browsers, and perhaps:


html, body {
overflow: hidden;
}

to prevent scrollbars for the iframe if the dimensions don't exactly match up, or if the script's hidden content causes scrollbars for the iframe in some browsers.

slowCode
08-13-2008, 05:55 PM
John,

Thanks for the suggestion. That was actually my original approach, unfortunately it created an altogether different problem. Perhaps I should have mentioned this, but, I can't use iframes because I then become unable to pop up the images in the carousel. :mad:

What I want to do it be able to "pop-up" the images in the carousel when clicked on so that you can see the larger version. I was planning to use an image viewer such as facebox but then the image is restricted to inside the iframe which is not big enough to show the full image.

A solution to either scenario would allow me to accomplish my goal, however, I searched the forum earlier and found some posts saying that you can't make the image viewer bigger than the iframe it's within- so I assumed iframes wouldn't work.

Make sense? Other ideas? :confused:

Thanks!

jscheuer1
08-13-2008, 10:00 PM
Yes and no. The iframe approach is good because it would only require any one given gallery to load at a time, and there would be no script conflicts among the galleries. AJAX is bad for that because it is complicated, and when possible sometimes undesirable to get external scripts to load, because they are still on the one page and this could lead to subtle conflicts that would only be apparent in extensive testing (sometimes the conflicts aren't so subtle - in which case it just won't work).

Depending upon how complicated your enlarged image routine is, it could be set to play out upon the top (parent) page.

I don't know if facebox does this. But a simple code could be made to do so fairly easily, and lytebox:

http://www.dolem.com/lytebox/

has this functionality built in, but is just a little tricky to pull off as the instructions for doing so (last I checked) aren't as complete as they could be, though the demo of doing it that way on its home pages shows all that needs to be done for it to display on the top page of an iframe.

slowCode
08-15-2008, 12:36 PM
Thank you! That should work. I tried to figure out the iframe issue for quite a while and thought it wouldn't work. But, based on the lytebox demo I think it should do everything I need! I will be trying to implement it this weekend!