PDA

View Full Version : can stepcarousel be used in popUp modal



SmileyGirl12
07-01-2012, 07:22 PM
1) Script Title: Step Carousel Viewer v1.9

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.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
07-02-2012, 12:14 AM
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
07-02-2012, 12:40 AM
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
07-02-2012, 12:45 AM
Just post the code, and we should be able to see what's going on

SmileyGirl12
07-02-2012, 01:12 AM
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
07-02-2012, 01:48 AM
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
07-02-2012, 02:06 AM
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
07-02-2012, 02:14 AM
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
07-02-2012, 04:00 AM
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
07-02-2012, 04:06 AM
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...

bernie1227
07-02-2012, 04:10 AM
Well what kind of things are you looking for in a slideshow? Maybe we can help you out finding a popup slideshow script.

jscheuer1
07-02-2012, 08:58 AM
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:


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


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


#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:


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

SmileyGirl12
07-02-2012, 02:56 PM
Thanks a ton John!! That did the trick!! :D:D

SmileyGirl12
07-03-2012, 07:53 PM
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?

jscheuer1
07-04-2012, 02:14 AM
I see what you mean. I did say some tweaking might be required, it still may. For now, change this highlighted line:


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


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

And add this rule to the stylesheet:


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