can stepcarousel be used in popUp modal

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??

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.

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??

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

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... :(

Quote:

---

Originally Posted by 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... :(

---

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

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?

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

Code:

---

//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

Code:

---


#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

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">
<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>

---

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?

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

Well what kind of things are you looking for in a slideshow? Maybe we can help you out finding a popup slideshow script.

OK. This is tested and works here. Using a text only editor like NotePad and a fresh copy of the script, comment out jQuery.noConflict() as shown from the stepcarousel.js file:

Code:

---

//** Step Carousel Viewer- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
//** Usage Terms: http://www.dynamicdrive.com/notice.htm
//** Current version 1.91 (Aug 15th, 11'): See http://www.dynamicdrive.com/dynamicindex4/stepcarouselchangelog.txt for details


//jQuery.noConflict()

var stepcarousel={
        ajaxloadingmsg: '<div style= . . .

---

For the popup code, use this instead:

Code:

---

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

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

function disablePopup(){
        if(popupStatus==1){
                $("#backgroundPopup").fadeOut("slow");
                $("#popupIPAD").animate({opacity: 0}, "slow", function(){this.style.visibility = 'hidden';});
                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();
                }
        });

});

---

In the css, change the highlighted as shown (one line):

Code:

---

#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{
visibility: hidden;
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:Verdan . . .

---

On the HTML page, add the highlighted as shown, after the carousel init:

Code:

---

<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']
});
jQuery(function($){
        $('img[title$=panels]').appendTo($('#popupIPAD'));
});
</script>
</head>
<body>

<div id="button" style="cursor:poi . . .

---

As I say, "tested and works here". But I don't have any of the images. So some tweaking might still be required.

Thanks a ton John!! That did the trick!! :D:D

Unfortunately, I have a new issue now. It seems to be that the navigation images are dependent on where the stepcarousel/modal button code is placed in the HTML. I moved all my code from the top to the bottom of my HTML and now I have lost the navigational arrows/images. How do I make these anchored to the stepcarousel/modal window and not dependent on where the stepcarousel/modal HTML is placed?

I see what you mean. I did say some tweaking might be required, it still may. For now, change this highlighted line:

Code:

---

<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']
});
jQuery(function($){
        $('img[title$=panels]').appendTo($('#popupIPAD'));
});
</script>

---

to:

Code:

---

        $('img[title$=panels]').appendTo($('#popupIPAD')).addClass('navImages');

---

And add this rule to the stylesheet:

Code:

---

.navImages {top: 47% !important;}

---

This really would be easier for me if you could put up a demo so I can see how it's behaving with the images.

If you want more help, please do that.