PDA

View Full Version : Step Carousel with jquery cycle script



Badgio
03-28-2010, 06:57 PM
1) Script Title: Step Carousel v1.8

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:

After ddadmin's sterling efforts to help resolve my earlier thread here http://www.dynamicdrive.com/forums/showthread.php?t=53399 my client/girlfriend has now requested a fade transition instead of a glide!

I had a dig around the scripts here and really liked the Ultimate Fade-in Slide Show for its fade effect but decided not to use it in conjunction with the Step Carousel (I was concerned about its use of an image array as opposed to a div) and instead went for the JQuery cycle script.

I'm having problems combining the two, 'Cycle' works fine on it own see here http://www.make-up.lt/cycle (http://www.make-up.lt/covers/page1.html) but when I add it to my existing template there is a javascript error when executing. http://www.make-up.lt/covers

If somebody could check the code I would be most grateful.

Many thanks,

Badgio

jscheuer1
03-28-2010, 08:04 PM
Remove this:


jQuery.noConflict()

from near the beginning of the stepcarousel.js file.

Badgio
03-29-2010, 08:53 AM
Great that works!

On another matter, as per the earlier thread that I linked above, ddadmin suggested this addition to the 'step carousel' setup code that would trigger the 'glider' transition.
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:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, 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 ['ajax', 'path_to_external_file'],
onpanelclick:function(target){
if (target.tagName=="IMG"){
featuredcontentglider.cancelautorotate(gliderconfig.togglerid)
featuredcontentglider.glide(gliderconfig, target.getAttribute('idx'))
}
}
})

Now that I am using 'cycle' instead, I guess I just need to replace this with a call to the appropriate 'cycle' function?

Cheers!

jscheuer1
03-29-2010, 11:47 AM
Yes. Give it a shot.

Badgio
03-29-2010, 03:22 PM
OK I've had a go, but I am a bit stuck.

First off, I declared the 'cycle' function.

<script type="text/javascript">
function imagechange() {
$('#test').cycle({
fx: 'fade',
timeout: 0,
speed: 200
});
}

imagechange();
</script>

The example code given to manually trigger the 'cycle' is as follows, although this is tied to a button. This being the img index value

$('#button1').click(function() {
$('#test').cycle(0);
return false;
});

What I cant workout is how to bind this 'trigger' function to the onpanelclick:function of the 'Step Carousel' and pass the 'idx' variable from ddadmin's earlier example?

Any help would be greatly appreciated.

Badgio

jscheuer1
03-29-2010, 04:24 PM
I'd try something straightforward like:


onpanelclick:function(target){
if (target.tagName=="IMG"){
$('#test').cycle(target.getAttribute('idx'));
}
}

Give that a shot. If there are problems try:


onpanelclick:function(target){
if (target.tagName=="IMG"){
$('#test').cycle(target.getAttribute('idx') - 0);
}
}

Still problems? Post a link to the page.

Badgio
03-29-2010, 05:23 PM
No joy...

I have republished the page here http://www.make-up.lt/covers

I had a look in firebug to see if there were any obvious errors, and the only thing that got returned was this [cycle] terminating; zero elements found by selector (DOM not ready)

jscheuer1
03-29-2010, 06:26 PM
I'm not getting that or any error. Looking at the cycle script, I don't think it can do that.

You might want to look at:

http://home.comcast.net/~jscheuer1/side/vfs/jsjq_2.htm

I think it can be adapted to do what you want. But I'll have to get back to you on how.

Badgio
03-29-2010, 06:51 PM
Thanks for the time you spent looking into this.

I checked out your slideshow and yes, if adapted that would work.

The truth is...I'm just after any fade transition that can be called/bound to the carousel onpanelclick:function.

jscheuer1
03-29-2010, 09:14 PM
I've got a mock up:

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

If you need help implementing it, let me know. Please download and use your own copy of:

http://home.comcast.net/~jscheuer1/side/vfs/jsjqslideshow_2b.js

Once you do that, you can get rid of:


<base href="http://www.make-up.lt/covers/" />

Also, notice that I've removed all traces of the cycle script, and all that was added before for this that's no longer needed (like idx), and rearranged things a bit to make them more valid (your page had two heads!). The onpanelclick is no longer required, the jsjqslideshow_2b script uses classes to define its own controls and these are now in the carousel's panels. Use your browser's 'view source' to get the code from the page. Quite a bit a tweaking can be done if desired/required (much through css alone), though of course not every possible thing that can be imagined can be done.

Badgio
03-29-2010, 10:07 PM
Amazing!

To a non coder like me, creating a mock-up that quickly was some party-trick!

Its late over here, so I will get down to the stripping out the dross and implementing the script you kindly provided tomorrow.

By the way, the reason for the two heads is that I'm using RapidWeaver to implement everything and I manually added a head section (in addition to the one automatically generated) for ease of referencing the JS scripts and other code.

I'll keep you posted, thanks once again.

Badgio
03-30-2010, 02:42 PM
It works great, thank you very much.

The only oddity that I've noticed is that the mouse hand pointer, which was initially working when I first made the changes, no longer appears when mousing over the thumbs.

This is the same in the mock up link you sent.

The click slide transition works though...

Any thoughts?

jscheuer1
03-30-2010, 05:57 PM
Add to your stylesheet:


.panel img {
cursor: pointer;
}

Badgio
04-14-2010, 04:35 PM
John,

Hope all is well!

Ref: your jsjq_2 slideshow script you provided here http://home.comcast.net/~jscheuer1/side/vfs/jsjqslideshow_2b.js

After a break from trying to create a website, I have just got round to looking at the AJAX loading of images.

You'll remember that I'm using the Step Carousel with has an ajax load function already in its js, which I would use to load the thumbnails.

Would it be possible to add an ajax element to your slideshow script with the file location being passed as a variable?

Or failing that, could the following code from the stepcarousel.js be tweaked to allow for the fetching of additional content (from the same html file) to a 2nd content DIV?


ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content
defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)
configholder: {},

getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer
return (val=="auto")? 0 : parseInt(val)
},

getremotepanels:function($, config){ //function to fetch external page containing the panel DIVs
config.$belt.html(this.ajaxloadingmsg)
$.ajax({
url: config.contenttype[1], //path to external content
async: true,
error:function(ajaxrequest){
config.$belt.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
config.$belt.html(content)
config.$panels=config.$gallery.find('.'+config.panelclass)
stepcarousel.alignpanels($, config)
}
})
},

Thanks once again.

jscheuer1
04-15-2010, 03:03 PM
I'm not 100% sure. You would probably just need to add the call to your success function:


success:function(content){
config.$belt.html(content)
config.$panels=config.$gallery.find('.'+config.panelclass)
stepcarousel.alignpanels($, config)
}

Now, this requires that you know the selector that you just imported or that perhaps is already there waiting for the Step Carousel to act as controls for it. In the mock up I provided, it was #test:


$('#test').slideShow({stopped: true, controls: '#mygallery', faderate: 1500}).css('position', 'absolute');

The #mygallery selector refers to the Step Carousel acting as controls, so you would need this too. And the imported #mygallery panel divisions must have the corresponding class names to act as controls (ex: <div class="panel slide_1">) Let's just assume you already have one with the above settings and that the new one uses:


$('#test2').slideShow({stopped: true, controls: '#mygallery2', faderate: 1500}).css('position', 'absolute');

As long as everything (#test2 and #mygallery2) are there and populated on success, you should be able to just:


success:function(content){
config.$belt.html(content)
config.$panels=config.$gallery.find('.'+config.panelclass)
stepcarousel.alignpanels($, config)
$('#test2').slideShow({stopped: true, controls: '#mygallery2', faderate: 1500}).css('position', 'absolute');
}

Badgio
04-15-2010, 03:44 PM
Hi,

Thanks for the reply, however I don't think this is what I am after, but I may be wrong.

I'll try to be a little clearer...

Essentially, I have two related sets of images to load.

The first being 'full sized' which are displayed using your slideshow code, and the second namely custom 'thumbs' that I have created.

These two sets of images reside in different divs as follows.
1. Full size
<div id="test" class="slideshow">
2. Thumbs
<div id="mygallery" class="stepcarousel">
<div class="belt">

Using the aforementioned Ajax routine in the stepcarousel, the thumbs load perfectly.

So what I wanted to do, was also include the full sized images in the html fetch file, so that both related sets of images were loaded together.

The problem is that the full size set get included in the same div as the thumbs on load and so of course it doesn't work.

My question is, how to load from one file and split/parse to the appropriate div?

I found the following example code, but was unable to get this to work when I amended the stepcarousel.js code, as no doubt there were errors in what I was doing...


$('#div_1 , #div_2').html('<img src="ajax-loader.gif" />'); // placeholder
$.ajax( {
url : 'ajax_file.php', // your ajax file
type : 'post',
data : postData,
success : function( resp ) {
$('#div_1').html($('#inner_1' , resp).html());
$('#div_2').html($('#inner_2' , resp).html());
}
});

An alternative would be to add an ajax call to your slideshow js and to then have two separate html fetch files for the two sets of images. I did look at your js file, but I didn't recognise the language and so was afraid to touch it.

I hope I have explained things better.

Cheers,

jscheuer1
04-15-2010, 08:04 PM
I see. Well, whatever you do, you need to initialize the slide show after the content arrives. Not too long ago I saw a method that used PHP to send the data as a json_encode() array, and that worked out, but it was for simple strings in the array and requires PHP as well as javascript/AJAX. What you could do is make two AJAX requests to two different files, one with the Carousel images, one with the slide show images. Or just use one file, send it's result to a hidden division and then clone the nodes in the hidden division to where you actually want them to go. If using id's though, these would have to be changed in or after the cloning process in order to get the Carousel and the slide show to init only the cloned versions.

Also, there may have been less wrong with your code than you think, the Step Carousel does this:


jQuery.noConflict()

so you can't use $ outside of it without defining it as jQuery, as I do with:


jQuery(function($){
$('#test').slideShow({stopped: true, controls: '#mygallery', faderate: 1500}).css('position', 'absolute');
});

That also delays the call until document ready, but that would be a good thing for an AJAX call. It can be done other ways though.

Badgio
04-16-2010, 04:58 PM
Hi,

Sorry to trouble you again...

I have managed to get the 2 sets of images loaded using ajax, but now however the click on thumbnail to trigger the slideshow doesn't work.

I have a test site here http://www.make-up.lt/portfolio.html

At the moment the script used to load the full size images is included in the main body of the html and on success calls your slideshow script.

Could you check the few lines of code for any errors or can you think of a reason why the slideshow would not be triggered?

Many thanks,

jscheuer1
04-17-2010, 06:08 AM
This should work. Get rid of:


jQuery(function($){
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: '/contents/ads_assets.html',
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({stopped: true, controls: '#mygallery', faderate: 1000}).css('position', 'absolute');
}
});
})

It's too soon to do that, #mygallery hasn't been populated yet. Use the Step Carousel's oninit function for that (additions highlighted):


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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: '/contents/ads_assets.html',
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({stopped: true, controls: '#mygallery', faderate: 1000}).css('position', 'absolute');
}
});

},
contenttype: ['ajax', '/contents/ads_thumbs.html'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

Badgio
04-17-2010, 03:39 PM
Hi,

Once again your code worked a treat! Many thanks.

I have also managed to add slimbox and added the call to initialise on the end of the above Step Carousel oninit function.

Hopefully, I coming to the end of this journey, the only remaining item will be incorporating additional ajax calls to load different content from a menu item click.

Based on the prior examples, I'm hopeful I should be able to manage that!

I have a quick question re your custom slideshow, is there a parameter that can be used to set which(or none) image is the first loaded?

If your custom slideshow is based on your DD Swiss Army slideshow then I can of course read up elsewhere on this site.

Regards,

jscheuer1
04-17-2010, 05:48 PM
It's not based on anything, except in spirit, in which case it's based on all the slide shows I've ever worked with or written.

But to answer your question, the first slide that will be shown is governed by the count property. This is a zero based index of the larger images (zero to however many there are minus one). So, for example, if you wanted the third image to show first:


$('#test').slideShow({count: 2, stopped: true, controls: '#mygallery', faderate: 1000}).css('position', 'absolute');

The show can also use cookies (has its own internal cookie routines, and properties to configure as regards that) to remember which image was last shown. But with AJAX thrown into the mix, using cookies might produce odd results, perhaps even an error if there are varying amounts of images in shows that could populate the same container.

In fact, I'm not sure what will happen, even without cookies, if you try to repopulate and reinit the slide show to the same container. It might work out, but it might need some tweaking, or a different approach. Like if there are the same number of images, just replace the src attribute of each thumb and the src attribute of each larger image.

Badgio
08-27-2010, 12:45 PM
Hi,

Got distracted by 'life' again but am now back on the website. http://www.make-up.lt/portfolio.html
(for info under PORTFOLIO only COVERS and ADVERTISING have any image sets)

Earlier in this thread you suggested the following code that would allow me to load a set of thumbs in Step Carousel with a set of images in your custom slideshow.


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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: '/contents/ads_assets.html',
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({stopped: true, controls: '#mygallery', faderate: 1000}).css('position', 'absolute');
}
});

},
contenttype: ['ajax', '/contents/ads_thumbs.html'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

This worked a treat but I then wanted to dynamically load content based on a menu selection.

This I managed to achieve by declaring the above code as a function and calling it from the menu line, but this meant with 5 menu items I would have to replicate the above 5 times, changing the URL's for my different content.

OK it works, but it was not very elegant.

So I thought, how about I append you highlighted code to the stepcarousel.loadcontent function in the stepcarousel.js which I have done.


loadcontent:function(galleryid, url, url1){
var config=stepcarousel.configholder[galleryid]
config.contenttype=['ajax', url]
stepcarousel.stopautostep(config)
stepcarousel.resetsettings($, config)
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: url1,
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({count:0, stopped: true, controls: '#mygallery', faderate: 750}).css('position', 'absolute');
function scanFrame() {
$("a[rel^='lightbox']", this.document).slimbox({/* Put custom options here */}, null, function(el) {return (this == el) || ((this.rel.length > 8)
&& (this.rel == el.rel));
});
}
scanFrame.apply(window);
$.each(window.frames, function() {
this.onload = scanFrame;
scanFrame.apply(this);
});
}
});
stepcarousel.init(jQuery, config)
},

Using the Safari Web Inspector I can see that the new content is fetched but the custom slideshow is not updated.

How do I initialise the slideshow after the content arrives?

Many thanks,

jscheuer1
08-27-2010, 03:41 PM
I don't like messing with the existing script if it can be avoided. That makes it hard to get future help with it and updating it more difficult when the author comes out with updates.

If what you had works, albeit needing to be repeated 5 times, I'd go with that. But you don't have to repeat it 5 times. You can do like so:


function updateBoth(url1, url2){
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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: url2,
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({stopped: true, controls: '#mygallery', faderate: 1000}).css('position', 'absolute');
}
});

},
contenttype: ['ajax', url1] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});
}

Then you only need 5 calls to it. Here's an example call:


updateBoth('/contents/ads_thumbs.html', '/contents/ads_assets.html');

Badgio
08-27-2010, 04:53 PM
OK thanks.

That was simple enough and does work.

However there seems to be a glitch with the pagination buttons as they now don't populate properly.

I guess their count needs to be reset before loading the new content?

jscheuer1
08-27-2010, 05:55 PM
I was taking your word for it that it worked. And it depends upon which pagination you are talking about. If it's the slide show script, you can try updating the count to 0 by adding the highlighted to this line:


$('#test').slideShow({count: 0, stopped: true, controls: '#mygallery', faderate: 1000}).css('position', 'absolute');

But I suspect, if that's the script at issue, it may be more or other than that. We may have to reset the length (if there are now a different number of images), but I think the script will do that. We may need to unbind events from the pagination before initializing the new content. That could hold true if it is the Carousel script, but for Carousel's pagination. In fact, with Carousel there may be other things we need to destroy to get it to initialize properly a second time in the same target area on a page.

To really diagnose this, I would want a link to a demo of the problem.

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.

Badgio
08-28-2010, 12:52 AM
Here is a link to the site. http://www.make-up.lt/portfolio.html/

As I mentioned earlier only the COVERS and ADVERTISING sub menu items have any image sets.

The issue is with the step carousel script as these are this are the only pagination buttons that are shown.

From observation, the new 'count' of the pagination buttons is added to the previous 'count' of the buttons, as opposed to overwriting them.

Hope this helps.

Badgio

jscheuer1
08-28-2010, 06:43 AM
This appears to be the ticket (do before updateBoth):


stepcarousel.resetsettings(jQuery, stepcarousel.configholder['mygallery']);

Better still, incorporate it into our function (additions/changes highlighted):


function updateBoth(id, url1, url2){
stepcarousel.resetsettings(jQuery, stepcarousel.configholder[id]);
stepcarousel.setup({
galleryid: id, //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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: url2,
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({stopped: true, controls: '#' + id, faderate: 1000}).css('position', 'absolute');
}
});

},
contenttype: ['ajax', url1] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});
}

Now we call it like so (example):


updateBoth('mygallery', '/contents/ads_thumbs.html', '/contents/ads_assets.html');

We can get even greater code savings by using this function to initialize in the first place. But for that we need to:


function updateBoth(id, url1, url2){
if(stepcarousel.configholder[id]){
stepcarousel.resetsettings(jQuery, stepcarousel.configholder[id]);
}
stepcarousel.setup({
galleryid: id, //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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: url2,
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({stopped: true, controls: '#' + id, faderate: 1000}).css('position', 'absolute');
}
});

},
contenttype: ['ajax', url1] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});
}

Badgio
08-29-2010, 07:29 PM
I put updateBoth in the body of the page and it works a treat.

http://www.make-up.lt/portfolio.html

However when I leave the page i.e. go to the BIO and then navigate back, I am unable to pass the variables url1 and url2.

I tried the following on a menu item. Which doesn't work.

<li><a href="../portfolio.html" OnClick="javascript:updateBoth('/contents/ads_thumbs.html','/contents/ads_assets.html')">ADVERTISING</a></li>

Instead it uses the code in the header.

So I thought I might be able to tweak the code in the header as follows


<script type="text/javascript">
function updateBoth(url1, url2){
if (url1==""){url1="/contents/ads_assets.html";
url2="/contents/ads_thumbs.html"}
stepcarousel.resetsettings(jQuery, stepcarousel.configholder['mygallery']);
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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:false},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: url1,
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({count:0, stopped: true, controls: '#mygallery', faderate: 750}).css('position', 'absolute');
function scanFrame() {
$("a[rel^='lightbox']", this.document).slimbox({/* Put
custom options here */}, null, function(el) {return (this == el) || ((this.rel.length > 8)
&& (this.rel == el.rel));
});
}
scanFrame.apply(window);
$.each(window.frames, function() {
this.onload = scanFrame;
scanFrame.apply(this);
});
}
});

},
contenttype: ['ajax', url2] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});
}
</script>


I tried to use the IF to load 'default' content when the site is first visited and url1 and url2 would be empty.

Is their a problem with the above code or is there a simple way to pass the variables from one page to another and execute the updateBoth function?

Thanks

jscheuer1
08-29-2010, 09:08 PM
You seem to have got stuck at using this in one of the earlier versions of it I outlined and have then tried to branch out from there in a way that's unworkable.

If you have server-side code like PHP or asp you can use that to pass the information from a link to the portfolio page, but then it would need the server side extension. Like portfolio.php or portfolio.asp, not portfolio.html unless your server can use server side code on a page like that, some can. You can pass this sort of information via javascript though, but not the way you are imagining. You have to either use a cookie or information passed with the URL (often called a query).

When I have a little more time I'll show you how to set it up.

What sort of server side code, if any, do you have available to you on this host?

Badgio
08-30-2010, 07:30 AM
The server side code is...

Apache 1.3.41
PHP 5.2.12

jscheuer1
08-30-2010, 09:17 AM
Great!

How familiar with PHP are you? Have you used it at all on this host?

Would you be willing to change portfolio.html to portfolio.php? How many pages link to it? You would have to either change the all the links, or get the server to parse .html as PHP. It may already, probably not though. Do you know?

While I wait for those answers, let's get things ready for whatever method we decide to use. Where you have:


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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:false},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: '/contents/cov_assets.html',
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({count:0, stopped: true, controls: '#mygallery', faderate: 750}).css('position', 'absolute');
function scanFrame() {
$("a[rel^='lightbox']", this.document).slimbox({/* Put
custom options here */}, null, function(el) {return (this == el) || ((this.rel.length > 8)
&& (this.rel == el.rel));
});
}
scanFrame.apply(window);
$.each(window.frames, function() {
this.onload = scanFrame;
scanFrame.apply(this);
});
}
});

},
contenttype: ['ajax', '/contents/cov_thumbs.html'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});

and then later:


<script type="text/javascript">
function updateBoth(url1, url2){
stepcarousel.resetsettings(jQuery, stepcarousel.configholder['mygallery']);
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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:false},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: url2,
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({count:0, stopped: true, controls: '#mygallery', faderate: 750}).css('position', 'absolute');
function scanFrame() {
$("a[rel^='lightbox']", this.document).slimbox({/* Put
custom options here */}, null, function(el) {return (this == el) || ((this.rel.length > 8)
&& (this.rel == el.rel));
});
}
scanFrame.apply(window);
$.each(window.frames, function() {
this.onload = scanFrame;
scanFrame.apply(this);
});
}
});

},
contenttype: ['ajax', url1] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
}
</script>

That's pretty much duplicate code. Get rid of the second bit and replace the first with:


function updateBoth(id, url1, url2){
if(stepcarousel.configholder[id]){
stepcarousel.resetsettings(jQuery, stepcarousel.configholder[id]);
}
stepcarousel.setup({
galleryid: id, //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:false, moveby:1, pause:3000},
panelbehavior: {speed:700, wraparound:true, persist:false},
defaultbuttons: {enable: true, moveby: 7, leftnav: ['assets/arrow_l.png', -15, 50], rightnav: ['assets/arrow_r.png', -0, 50]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit: function(){
var $ = jQuery;
$('#test').html('<img src="rw_common/themes/multinotheme/css/loader.gif"/>');
$.ajax({
url: url2,
async: true,
error: function(ajaxrequest){
$('#test').html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success: function(content){
$('#test').html(content)
$('#test').slideShow({count:0, stopped: true, controls: '#' + id, faderate: 750}).css('position', 'absolute');
function scanFrame() {
$("a[rel^='lightbox']", this.document).slimbox({/* Put
custom options here */}, null, function(el) {return (this == el) || ((this.rel.length > 8)
&& (this.rel == el.rel));
});
}
scanFrame.apply(window);
$.each(window.frames, function() {
this.onload = scanFrame;
scanFrame.apply(this);
});
}
});

},
contenttype: ['ajax', url1] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});
}
updateBoth('mygallery', '/contents/cov_thumbs.html', '/contents/cov_assets.html');

OK, that's step number one. Now, in a related matter (since we just changed the function, we have to change how it's used), where you have:


<div class="submenu">
<ul>
<li><a href="portfolio.html" rel="self" id="current">COVERS</a></li>
<li><a href="portfolio.html">EDITORIAL</a></li>
<li><a href="javascript:updateBoth('/contents/ads_thumbs.html','/contents/ads_assets.html')">ADVERTISING</a></li>
<li><a href="portfolio.html">OTHERS</a></li>
</ul>
</div>

I'm not sure why you have rel="self" there, does it serve any purpose? If not, get rid of it. Also, since this link is already on the portfolio page, it should use our function, not reload the page. And, using href="javascript: . . . for the ads link is risky without a corresponding onclick event. So, aside from the rel attribute, which if you need it, keep it, we should have:


<div class="submenu">
<ul>
<li><a href="portfolio.html" onclick="updateBoth('mygallery','/contents/cov_thumbs.html','/contents/cov_assets.html'); return false;" id="current">COVERS</a></li>
<li><a href="portfolio.html">EDITORIAL</a></li>
<li><a href="portfolio.html" onclick="updateBoth('mygallery','/contents/ads_thumbs.html','/contents/ads_assets.html'); return false;">ADVERTISING</a></li>
<li><a href="portfolio.html">OTHERS</a></li>
</ul>
</div>

About that id="current", what's that for? We could perhaps use that, or something like it to show the link for the current gallery in a different color. Right now it appears not to be doing anything, is it?

Badgio
08-30-2010, 10:52 AM
I have no knowledge of PHP.

I basically started the website without any scripting or web design knowhow. I didn't really appreciate what I was letting myself in for!

However this has piqued my interest so I intend to learn javascript and brush up on my html once this is done.

OK...only 2 other pages link to portfolio.html they are a BIO and a LINKS page.
So changing portfolio from .html to .php is not a problem.

I have removed the duplicate code and retested the updateBoth function and its working.

In answer to your questions re rel="self" and id="current" I am using RapidWeaver, which is a 'theme' based web design package. I did a mock up using a theme to see what the underlying html looked like and then started to strip out the theme elements to give me a blank canvas to start from. These items may be a hangover.

jscheuer1
08-30-2010, 01:37 PM
OK, rename portfolio.html to portfolio.php and change the links on it and other pages that reference it, add this code to the very top:


<?php
$gallery = isset($_REQUEST['gallery'])? $_REQUEST['gallery'] : 'cov';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><!-- www.multithemes.com -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<meta name="generator" cont . . .

And down here where we call updateBoth:


scanFrame.apply(this);
});
}
});

},
contenttype: ['ajax', url2] //content setting ['inline'] or ['ajax', 'path_to_external_file']
});
}
updateBoth('mygallery','/contents/cov_assets.html','/contents/cov_thumbs.html');

</script>

Make that like:


updateBoth('mygallery','/contents/<?php echo $gallery; ?>_assets.html','/contents/<?php echo $gallery; ?>_thumbs.html');

Now for links on other pages (not links on portfolio.php) to portfolio.php we can do like this:


<a href="portfolio.php?gallery=cov">COVERS</a>
<a href="portfolio.php?gallery=ads">ADVERTISING</a>

That's it. You don't really need to to use ?gallery=cov for COVERS, it's the default. But it will give users a visual clue in the URL and serves as an example of the pattern we are developing here.

And you can use that as a link on portfolio.php to portfolio.php, but that will reload the page. We have our updateBoth function to do that for us without reloading. What you might and probably should do (on portfolio.php) is:


<div class="submenu">
<ul>
<li><a href="portfolio.php?gallery=cov" onclick="updateBoth('mygallery','/contents/cov_thumbs.html','/contents/cov_assets.html'); return false;" id="current">COVERS</a></li>
<li><a href="portfolio.php">EDITORIAL</a></li>
<li><a href="portfolio.php?gallery=ads" onclick="updateBoth('mygallery','/contents/ads_thumbs.html','/contents/ads_assets.html'); return false;">ADVERTISING</a></li>
<li><a href="portfolio.php">OTHERS</a></li>
</ul>
</div>

These will not generally be used, but will show up in the user's status bar as a visual clue as to what will happen if they click, and if they use their browser to load that link (say - by right clicking and opening in a new tab), it will have the desired result.

Let's get that working. Then if you want to branch out into coloring the active gallery's link in the menu, we can get to that next.