Help using stepcarousel and lightbox2.04

**albertyeoh05** · 09-18-2010, 11:23 AM

1) Script Title:
a) Step Carousel Viewer v1.9
b) Lightbox2.04

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

3) Describe problem:
Im trying with no success running both stepcarousel and lightbox2.04 simultaneously.

I've managed to get lightbox well and running but problems arise after installing stepcarousel. The combination results in stepcarousel running but lightbox is not. When a lightbox linked image/button is pressed, the enlarged image will appear while the whole website layout gone.

Im implementing these scripts in my template and here goes the script:

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>Paris Milan Couture Online Handbag</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
<!--
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
//-->
</script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link href="../css/carousel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="stepcarousel.js"></script>
<script type="text/javascript" src="stepcarousel-setup.js"></script>
</head>

I dont mind to admitting im quite a newb with all these scripting stuffs. Appreciate any help I can get. Cheers

**jscheuer1** · 09-18-2010, 02:42 PM

First thing I'd try is to reverse the order here:

Code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link href="../css/carousel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="stepcarousel.js"></script>
<script type="text/javascript" src="stepcarousel-setup.js"></script>

to:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link href="../css/carousel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="stepcarousel.js"></script>
<script type="text/javascript" src="stepcarousel-setup.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

That should do it. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**albertyeoh05** · 09-20-2010, 09:59 AM

Hi jscheuer1,

Thanks for your assistance but so far i've followed your instruction to reverse the codes, the result i get is a working Lightbox2.04 but a non functional Step Carousel Viewer v1.9.

Here goes the link:
http://sklipz.com/pmc/home.html
(Fyi the home page is controlled by a template and if you need it, i dont mind uploading it)

Thanks again and hope to hear from you soon.

Cheers

**jscheuer1** · 09-20-2010, 11:55 AM

You aren't using the most recent version, consider updating. But that's not the problem.

The problem is that as far as I can see there are no controls for the carousel and its auto mode is disabled. In other words everything is working fine, there's just nothing to do.

Here in your stepcarousel-setup.js file make the highlighted change:

Code:

// For instructions how how to modify go to this URL
// http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:6000},
	panelbehavior: {speed:500, wraparound:true, persist:true},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

**albertyeoh05** · 09-20-2010, 01:01 PM

Could you give me the link to the latest version so i can upgrade it?

Btw i've enabled autostep earlier on, even before posting here.

Is it ok if i email you the entire files so you can have a better look at it?

Cheers

**jscheuer1** · 09-20-2010, 02:44 PM

No need to send me the files. The one additional change I suggested works flawlessly, demo:

http://home.comcast.net/~jscheuer1/side/paris_h.htm

You must have tried that (autostep enabled) before we switched the order of the scripts. Having them in the proper order is required in any case.

As for the update, first get this working. Then look at the demo page:

http://www.dynamicdrive.com/dynamici...epcarousel.htm

All the latest information and files are on or linked to it. Before updating anything though, backup the working page and all of its resource files.

**albertyeoh05** · 09-20-2010, 03:51 PM

WOW i'm totally BLOWN away by your help! Awesome!

Anyway i've tried your link and it works! I will try it first thing when i get up in the morning ... which is my birthday. This is like a birthday present lol

Thanks! Cheers

**albertyeoh05** · 09-21-2010, 01:56 PM

Its working now! thanks! It is the perfect birthday present! thanks again! Cheers

Thread: Help using stepcarousel and lightbox2.04

Thread Tools

Search Thread

Help using stepcarousel and lightbox2.04

Bookmarks

Bookmarks

Posting Permissions