can stepcarousel be used in popUp modal

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

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.

**SmileyGirl12** · 07-02-2012, 02:56 PM

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

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

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.

Thread: can stepcarousel be used in popUp modal

Thread Tools

Search Thread

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions