can stepcarousel be used in popUp modal

[SmileyGirl12]

1) Script Title: Step Carousel Viewer v1.9

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem: I need to open my stepcarousel in a jQuery popup modal. They both work great independently but not together. Any ideas how to get these two scripts/plug-ins to work together??

[jscheuer1]

What jQuery popup modal are you using? I Googled it and got several that could fit that description.

One way would be to import the step carousel as a separate page into an iframe that shows in a modal.

Another is to have it on the page and have it revealed into a modal.

Yet another is to have it imported via AJAX into a modal.

Whichever is done, care must be exercised to make sure the carousel can fully init. This involves running its init code at the right point in time. The carousel must not be display: none; at that point, but it can be visibility: hidden; and position: absolute; outside the viewable area of the page or at least out of the flow of the page. And of course, unless it's in an iframe, it's markup must be on the page, but probably not more than once - like if the modal script copies it from the page to the modal, that probably won't work. It could move it from one place on the page into the modal, make it visible and then init it. But then what about if it's hidden and shown again, that would get complicated.

It's all complicated regardless of the method used. The easiest would probably be using an iframe. It still cannot be display: none; though.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[SmileyGirl12]

Thanks John! I haven't placed it on a site yet, just testing locally. I can get the modal to popup, but can't get the slider/carousel to work. Unfortunately, I don't remember which popup modal I'm using for sure and new to all this stuff so not sure where to go from here...sounds like it's going to be over my head no matter what. I can send you the code if that would work??

[bernie1227]

Just post the code, and we should be able to see what's going on

[SmileyGirl12]

So, I've tried so many different things that nothing works now. Both my codes work independently but not at all together now. Maybe the best question now would be...do you know of anywhere that the stepcarousel is being used in a popup? That might be my best course of action at this point...

[bernie1227]

So, I've tried so many different things that nothing works now. Both my codes work independently but not at all together now. Maybe the best question now would be...do you know of anywhere that the stepcarousel is being used in a popup? That might be my best course of action at this point...

I can't find much, could you please post your code?

[jscheuer1]

Nope, but it is doable I can assure you.

What jQuery popup modal are you using? Can you at least link us to where you got the code for that?

[SmileyGirl12]

Not entirely sure what code to post... I'm pretty much using the stepcarousel out of the box except changed a few classes, etc... Thank you so much for the help with this! Hopefully it's something stupid that I'm overlooking.

POPUP JS

//0 means disabled; 1 means enabled;
var popupStatus = 0;

function loadPopup(){
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupIPAD").fadeIn("slow");
		popupStatus = 1;
	}
}

function disablePopup(){
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupIPAD").fadeOut("slow");
		popupStatus = 0;
	}
}

function centerPopup(){
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupIPAD").height();
	var popupWidth = $("#popupIPAD").width();
	$("#popupIPAD").css({
		"position": "fixed",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}

$(document).ready(function(){
	
	$("#button").click(function(){
		centerPopup();
		loadPopup();
	});
				
	$("#popupClose").click(function(){
		disablePopup();
	});
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

CSS

#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupIPAD{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:auto;
width:700px;
background:#FFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupClose{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height:10px;
/*right:4px;
top:4px;
position:absolute;*/
color:#333;
font-weight:normal;
/*display:block;
*/}
#button{
text-align:center;
margin:100px;
}
#button.IPAD{
text-align:center;
margin:0;
}

#modalWrapper {
	width:700px;
	height:auto;
	margin: 0 auto:
}

#header {
	height:95px;
	margin-bottom: 0;
}

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

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

.stepcarousel .panel{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 10px 0px; /*margin around each panel*/
	/*width: 340px; Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	border-right: 1px solid #CCC;
	text-align:center;
}

#salestext {
	margin:10px auto;
	text-align:center;
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
}

.img {
	border:none;
}

HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link href="images/popUp_TEST.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="images/popUp_TEST.js"></script>
<script type="text/javascript" src="images/stepcarousel_TEST.js"></script>

<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'store', //id of carousel DIV
	beltclass: 'featured', //class of inner "featured" 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, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/modal_arrow_left.png', 0, 0], rightnav: ['images/modal_arrow_right.png', -44, 0]},
	//statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});

</script>
</head>
<body>

<div id="button" style="cursor:pointer;" class="IPAD">CLICK HERE</div>

<div id="popupIPAD">
        <div id="modalWrapper">
        <div id="header"><a id="popupClose" style="cursor:pointer;"><img src="images/modal_header.gif" align="" /></a></div>
            <div id="store" class="stepcarousel">
            <div id="salestext">SALES TEXT HERE:</div>
            <br clear="left" />
                <div class="featured">
                    <div class="panel" style="width:235px;">
                    <img src="images/modal_panel1.jpg" class="img" />
                    </div>
                    
                    <div class="panel" style="width:295px;">
                    <img src="images/modal_panel2.jpg" class="img" />
                    </div>
                    
                    <div class="panel" style="width:235px;">
                    <img src="images/modal_panel1.jpg" class="img" />
                    </div>
                    
                    <div class="panel" style="width:295px;">
                    <img src="images/modal_panel2.jpg" class="img" />
                    </div>
                    
                    <div class="panel" style="width:235px; border-right:none;">
                    <img src="images/modal_panel1.jpg" class="img" />
                    </div>
                
            	</div>
            </div>
        </div>
   
</div>

<div id="backgroundPopup"></div>

</body>
</html>

[bernie1227]

I just had a thought while looking through this as to whether or not it would just be better to use a popup slideshow rather then a slideshow within a popup?

[SmileyGirl12]

I've wondered that as well...but the stepcarousel does exactly what I'm looking for. I don't have enough knowledge to know of a slideshow that would do the same thing. I need to be able to show some of the items so that they scroll for more...hopefully that makes sense...