PDA

View Full Version : Multiple Multidirection Conveyor Belt slideshows with Lightbox?



sevrinsevrin
11-01-2009, 04:04 AM
Hello there -

This sounds insane, I am sure, but:

I would like to have up to five Conveyor Belt slideshows running on one page: three going left, two going right.

Further, I would LOVE to have the images, once clicked, open up in something like Lightbox instead of going off to another page.

I have already successfully converted the script to run left-to-right instead of right-to-left but cannot seem to get two conveyors (not to mention five!) running in the same page at the same time, no matter if they run in the same direction or not.

Am I asking too much? :eek:

Thanks in advance!

jscheuer1
11-01-2009, 05:35 AM
It is (probably) insane. At the same time it is doable at least in theory. The reason that I say that it is probably insane though is that the screen redraw and CPU resources required for 5 conveyors alone would be enough to cripple most computers at least to the degree that the display would look jumpy at best. If the images involved are large in byte size, the problems would be magnified.

Folks often want to push DHTML scripts to their limits without consideration for what this may wreak in various browsers and/or on various computers.

The web is not a TV. Whatever you do requires resources on the user's end that are limited. Because of this, subtle is better than blatant, if you catch my drift.

sevrinsevrin
11-01-2009, 06:30 AM
> subtle is better than blatant

Actually, the effect I was going for, because of the graphics involved, was fairly subtle (no, really - small, simple gifs) but your comments are extremely useful and I absolutely appreciate the candor and care your response contains.

How about two conveyors (one left, one right) with lightbox?

The site and gifs are here: http://www.coreyshead.com/monstersandrobots.html

(no, I am not suggesting keeping the fade, yes, I know the site is a horrible, deprecated mess - this is the cost of being a developer: your own site falls to shite as you work on everyone else, yes, my beta is table-less ... )

The images behind the present links are what I am proposing would come up in Lightbox.

If no to two conveyors, could I use this with Lightbox AND is there any way to stick the js in a .js file off the page with just a link in the header?

Thanks for the responses!

jscheuer1
11-01-2009, 07:08 AM
This may actually be feasible then. I did say it was possible in theory, my main concern was how extreme in resource consumption the finished project would be.

I've already implemented (for another request from another poster) all of this (if I understand you correctly) except for the multiple conveyor part:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/conveyor.htm

I also happen to be playing around with a multiple use conveyor script that I already wrote, upgrading it, and already see how it could be tied in with the above, in place of the single conveyor. But there will be a bit more coding involved before that comes to fruition.

Watch this thread for further developments. In the meantime, feel free to comment further.

sevrinsevrin
11-01-2009, 07:18 AM
> I've already implemented (for another request from another poster) all of this (if I understand you correctly)

You've got my thinking down pat with that, actually: a conveyor (or 5 - grin grin) with connection to lightbox or similar script.

Heck, I don't even need the fancy-schmancy later version lightbox (some of the slickness therein makes me a bit queasy, y'know?), just any way to attach another script that will effect the display of the image clicked on the conveyor.

Heck, thickbox'd be fine, too. Anything to allow my viewers to view the proposed gallery all on one page.

Again: thanks!

jscheuer1
11-01-2009, 07:34 AM
I realize that the lightbox display can seem overly slick or imposing in contrast to some pages. However, the animations can be disabled and the overlay (the part that grays out the rest of the page) can be altered so as to be either unobtrusive (very low opacity, which I like in many cases because it still allows closing the lightbox by clicking anywhere outside the image box) or non-existent.

The real trick in combining these two scripts is getting the conveyor to stop (cross browser) while the lightbox displays. I've worked that out for the single conveyor as you can see. It shouldn't be too hard to do for multiple conveyors.

sevrinsevrin
11-01-2009, 03:21 PM
> the animations can be disabled

I figured as much. I am already aware of the ability to adjust the png opacity.

The reason I brought up using something potentially lighter was because it would be ... lighter; being mindful of your previous concern for the weight of the multiple operations.

Thanks!

jscheuer1
11-01-2009, 04:07 PM
Lightbox no longer uses a png for opacity. It's just style now and has been for some time, but it can be adjusted in the configuration of the main script. Here are the options in the version 2.04a lightbox.js file I modded for use with the conveyor and other scripts:


//
// Configuration
//
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
cookieForFirstLight: false, // use session only cookie for first light? (true/false)

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

borderSize: 10, // if you adjust the padding in the CSS, you will need to update this variable

forceLocal: false, // set to true to force lightbox into a frame or iframe
// (default: false) - will allow lighbox effect to appear on the top page of an iframe if any

startCallback: function(){}, // callback for ligthbox start
startCallbackType: 'afterFinish', // scriptaculous effect callback method default = 'afterFinish'

endCallback: function(){}, // callback for lightbox end
endCallbackType: 'afterFinish', // scriptaculous effect callback method default = 'afterFinish'

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"

// End Configuration -----------------------------------------------------------------------------------


If you disable the animation, it will make the code lighter to execute.

So now anyways, I've got a bit further with the multi use conveyor and lightbox:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/conveyor_oo.htm

But just now I looked at the title of this thread and saw:


Multiple Multidirection

and hadn't really been thinking about that. However, at that rate, this script might be the one to use for that part:

http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

sevrinsevrin
11-01-2009, 04:34 PM
> Lightbox no longer uses a png for opacity

Ah, well. Don't I feel foolish? (the answer is yes)

> this script might be the one to use for that part:

Nice! I saw this, too, and thought "well, there's two different scrollers, anyway":

http://www.vicsjavascripts.org.uk/ContinuousScrollII/ContinuousScrollII.htm

I will play around some more with the bits and direction you have provided and see what can be done/discovered on my end, with my limited understanding. Thanks again!

jscheuer1
11-01-2009, 04:54 PM
I had looked at Vic's page before because he had linked it to a thread I was participating in as a possible solution for the original poster's situation. I noticed some inconsistencies in how the vertical scroller operated in at least two browsers (Opera and Firefox), but haven't looked at his code. That aside for the moment (the issue only arose when manipulating the vertical scroller with its scrollbar - things got out of kilter sometimes), there should be a way to set that up with my Lightbox mod. It should be just a matter of setting up the scrollers and finding the hooks in them to stop and start them in relation to the lightbox popping up and being dismissed - the basics (on the lightbox side) of which I've already worked out.

I just looked at his code, it's a nightmare. There are two scroller scripts on the page and it is unclear which or if both are being used. Also, the code looks unnecessarily complex to me, at least at first blush.

sevrinsevrin
11-02-2009, 02:30 AM
Holy Cow, I have everything but the direction working:

http://www.coreyshead.com/beta/monstersandrobots.html

(the only lightbox item, at this point, is a yellow, tentacled icon in the top row - but it works!)

Strangely, the crawler script's "direction" parameter (direction: 'right', ('right' or 'left') ) doesn't seem to effect the direction of the script. I even tried it on a single string in a bare page but the crawl remained obstinate, heading off to the left no matter what. (I presently have the directions set to stagger the flow for the hell of it - if you tap the 2nd and fourth string on the left, you'll get the effect I am hoping for - disconcerting but I like it).

If you have any ideas for the directional aspect, I'd be interested but, heck, I'm 90% home as it is so: Thanks for all your help!

jscheuer1
11-02-2009, 05:43 AM
Pretty cool. You've done a nice job.

In no particular order, three things:

You've misunderstood direction. It is not a style, rather a distinct property of the crawler instance:


<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '10px',
'width': '800px',
'height': '110px'
},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
direction: 'right',
savedirection: false
});
</script>

NOT:


<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '10px',
'width': '800px',
'height': '110px',
'direction': 'right'
},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: false
});
</script>

The default direction if not specified is left.

Second, this bit:


<script type="text/javascript">
LightboxOptions.startCallback = function(){
for(var i = 0; i < ConveyorBelt.ar.length; ++i){
ConveyorBelt.ar[i].copyspeed = 0;
ConveyorBelt.ar[i].halt = true;
}
};
LightboxOptions.startCallbackType = 'afterUpdate';
LightboxOptions.endCallback = function(){
for(var i = 0; i < ConveyorBelt.ar.length; ++i){
ConveyorBelt.ar[i].copyspeed = ConveyorBelt.ar[i].speed;
ConveyorBelt.ar[i].halt = false;
if(ConveyorBelt.ar[i].stp){
ConveyorBelt.ar[i].mousereact.onmouseover();
}
}
};
Event.observe(window, 'load', function(){
for(var i = 0; i < ConveyorBelt.ar.length; ++i){
(function(mh, c){
document.observe('mousemove', function(e) {
var x = e.pointerX(), y = e.pointerY(), co = mh.cumulativeOffset(), gd = mh.getDimensions();
c.stp = false;
if(x > co.left && x < gd.width + co.left && y > co.top && y < gd.height + co.top){
c.stp = true;
}
});
})($(ConveyorBelt.ar[i].mouseholder), ConveyorBelt.ar[i]);
}
});
</script>

Doesn't do anything with crawler and is causing an error(s), might as well get rid of it. It was for conveyor, to stop the conveyors and resume them visa vis lightbox activation. Crawler works differently, so the same logic might not apply even if adapted to crawler. But it looks like the page is more fun with the monsters continuing to move underneath the overlay than it would be if they stopped. Don't you agree?

Third, there appear to be some errors on the page unrelated to the two above considerations, but I cannot be sure until you deal with the above.

sevrinsevrin
11-02-2009, 01:51 PM
> the page is more fun with the monsters continuing to move underneath the overlay

I think it's about the worst form of image nav I've ever seen but the point is to be graphically interesting and, at the same time, sort of a carnival duck-shoot, if you know what I mean so, yeah, it is suiting my needs absolutely - and Thank You for helping me to realize such a boneheaded idea!

> You've misunderstood direction

Ah! I wondered about that but apparently never checked my suspicions. The instructions for the script made it seem like it most of the variables were styles. At least to a neophyte. =) Thank you. (I wonder what else I got wrong - I'll do some more pokin')

> Second ... Doesn't do anything with crawler

Hah! I wondered about that, too. After posting here I realized my drop-downs were no longer working on the page (here they do: http://www.coreyshead.com/beta/index.html ), so I did some script rearranging in the head and discovered that removing that chunk had no effect - neither good nor bad! Never realizing that it was for Conveyor, not Crawler! Duh ...

In any case, it seems like the conflict is somewhere between Lightbox and the dropdowns as I can activate one or the other by putting the one I wish to work lower in the head stack.

Now I've seen Lightbox work with these dropdowns so I'm left with the conclusion that a) I am, in fact, asking an awful lot, here or b) I've got it wrong, again!

Thanks for your help!

jscheuer1
11-02-2009, 02:24 PM
There is a conflict with jQuery and Prototype. The way you currently have it on the page, the order of the scripts is correct. The jQuery scripts should come first. And since your menu script is so simple (or at least short), it can easily be made not to conflict by changing how it begins(changes and addition highlighted red):


// JavaScript Document

//doesn't come with versioning, so I dub this 1.1 (I made some tweaks)!
jQuery(document).ready(function($){

$("li.haschild").addCl . . .

I also found one other error which will oly effect some browsers. For this crawler (mycrawler4):


<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler4',
style: {
'padding': '10px',
'width': '800px',
'height': '110px',
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
direction: 'right',
savedirection: true
});
</script>

See the above highlighted red comma. It is technically invalid (no trailing commas allowed internally after the last item or property in an array or object), but most browsers will error correct that for you. IE is one that will not, so it should be removed.

Oh, and BTW - I was right, this page is pretty CPU intensive with all the constant screen rewrites, so you may still want to consider less (in this case) crawlers and disabling the animations in Lightbox. Though it only gets really bad when more than one page of it is open at a time. However, this would be the same as having your one page open and some other CPU intensive operation going on anywhere else in the browser or the computer in general.

sevrinsevrin
11-02-2009, 03:08 PM
> there is a conflict / See the above

Thank you but again! It is as I had imagined it could be.

> this page is pretty CPU intensive with all the constant screen rewrites

Yeah, I noticed that when I was testing. Maybe three rows instead of five (gotta keep that balance) and/or nix the animation. I'll play with it - THANK YOU!

jol
12-29-2009, 10:18 PM
Hi there - I was wondering if anyone out there could help me

I'm redoing my site from many years ago - www.industrialarts.co.uk

It contains a "Conveyor" - to which I've always wanted to add a "Lightbox" effect. Hence I was very excited to come across this thread

Well - the good news is that I've managed to get a test page up and running and it's doing exactly what I want it to in Firefox and in Safari

However .. in Internet Explorer 8 .. it ain't good. The scripts on the page seem not to work at all. (In Internet Explorer 7, it's worse as the formatting is haywire too - but I'll try to fix one thing at a time)

http://www.industrialarts.co.uk/test/chairs/chairs.html

So - if anybody could be good enough to take a look at my test page and offer any suggestions for getting it running on Internet Explorer too - I'd be massively grateful

Cheers, Jol

jscheuer1
12-31-2009, 06:58 AM
The problems with that page are at least two fold. Script errors and invalid HTML. The first may arise from the second, but also may be independent of it. The problems in IE are probably from the invalid HTML code. Validate your page at:

http://validator.w3.org/

Now, the biggest problem is the second DOCTYPE and opening document tags. Removing them may fix a lot. Also, many of the 'errors' reported by the validator will be ignored and/or dealt with somehow by most browsers. Some will not be ignored or dealt with by IE though. This is one of the many reasons it's a good idea to write valid code and to keep track, with each change to a document, that it still validates.

jol
12-31-2009, 02:00 PM
That's brilliant John .. many many thanks !

I'm a tinkerer and I think that must be frustrating for the experienced folk

Either way - really appreciate your assistance !!

I'll get into the Validator stuff .. and report back

Kind Regards and a very Happy New Year to all !

PS. Test page is now at http://www.industrialarts.co.uk/chairs/chairs.html

jol
01-06-2010, 07:19 PM
Hi John and all

I'm pleased to report that I've made some really good progress since last week

I've managed to get the error count down very significantly

However - I am still showing errors - and DOCTYPE appears to be a common theme.

(Additionally John - you know the comma that you should omit if the given slider is the final slider .. well .. I've found that if I remove the comma from the end of the first slider code .. then nothing works at all. What might I have misunderstood ? Should I remove the references to slider_2 ? Should I remove the code for slider_2 ?)

So - in summary - I feel I'm making good progress - but I still fail completely with Internet Explorer and I'm hoping for some more tips to help me edge forward with this project

Many thanks if you can offer any further advice

Kind Regards, Jol

jscheuer1
01-06-2010, 07:30 PM
Yes, remove the comma and all of this:


(function(){var slider = [];
//Specify a second slider (use only for more than one show, use as many as needed)


//Specify slider properties
slider.id = 'slider_2'; // id of target element for slider (quoted string) - required
slider.width = 142; // slider pixel width (unquoted integer) - required
slider.height = 0; // pixel height (unquoted integer) - required
slider.speed = 0; // speed - larger is faster ex:3 (unquoted integer) (range: 0-15) - required
slider.bgColor = 'white'; // background-color, ex:'white' or '#eaeaea' (quoted string) - required
slider.imageGap = '<br>'; // gap between each image, use HTML (quoted string) - if not a vertical slider, no line breaks allowed
slider.vertical = true; // should slider be vertically orientted (true or false) - unquoted (defaults to false)
slider.mousedriven = true; // should slider be mouse controlled (true or false) - unquoted (defaults to false)
slider.moveatleast = 1; // if mouse driven, minimum movement when mouse is not over slider (unquoted integer) - defaults to 0
slider.maxspeed = 12; // if mouse driven, the maximum speed (unquoted integer) - defaults to 7
slider.restarea = 16; // if mouse driven, the size of the neutral area in the middle of the slider (unquoted integer) - defaults to 6
slider.startposition = -40; // optional (unquoted integer), adjustment for start position of slider

return slider;})() // <-- no comma after last slider return

jol
01-06-2010, 07:45 PM
Thanks John - I'll do that and report back !

PS I forgot to mention the site is now at ..

www.industrialarts.co.uk

jol
01-06-2010, 08:30 PM
Hi - I've done that John .. many thanks for your advice !

http://www.industrialarts.co.uk/

On my home page (for example), I'm still showing DOCTYPE and other errors .. and Internet Explorer 7 won't load any of my pages at all ..

.. so any further advice is hugely appreciated - I am getting there !

jol
01-09-2010, 09:15 PM
God love s a tryer !!

So .. new testpage !

.. I copied the index.html page and stripped it right down ..

www.industrialarts.co.uk/index b.html

you can see here that both my scripts are running in IE8 !!!!!!!

at last .. amazing !

but how did I get them both running on the same page ?

.. I removed this ..
<div id="content">

.. and I put in this ..
<body onload="MM_preloadImages(‘http://www.industrialarts.co.uk/Images/bw.gif’)…;initLightbox()">

(I got that bit from the JS Conveyor 2.04 help page)

now I managed this by futzing around because as you guys know by now - I haven't got a f%^ng clue what I am doing

So .. this must give some clues, right ?

2 scripts are banging heads ? Is that right (in IE)

I will send my best donkey to anyone who can help me through this !

Thanks for reading .. hope someone can give some clues as to what's happening here ! Thanks again !

jscheuer1
01-10-2010, 02:53 PM
Adding or removing opening div tags only matters insofar as how it affects the layout and whether or not the resulting page is valid markup. This bit (highlighted):



<body onload="MM_preloadImages(‘http://www.industrialarts.co.uk/Images/bw.gif’)…;initLightbox()">

is not required with Lightbox v2.04a and could very well cause an error.

I cannot find the page referred to as:


www.industrialarts.co.uk/index b.html

Your main page appears to have a redirect for IE to an unrelated page.

jol
01-10-2010, 06:25 PM
Hi John - thanks once again for your input

I'd lost heart very late last night and put the redirect for IE users up - then at least they get to see something of my work on my chair site.

Yesterday I managed to strip everything out of a testpage except the scripts - but even then it didn't work properly

I've put a testpage up again at http://industrialarts.co.uk/indexb.html (no space before the b)

I've tried the amended script as you suggested but it doesn't help - the reason is probably that I'm not really understanding why & how it can help and what to do to make it so

I've spent a colossal amount of time on refreshing the Industrial Arts site - and except for IE - I'm proud to say I've got exactly what I wanted. But I realise it's not good enough to exclude IE users.

I'm one of these people who like to challenge myself and learn about new stuff - but this is way out of my depth.

Sadly, I'm getting the feeling that this site is not going to work with IE and am now considering trashing the site in favour of some kind of Wordpress out-of-the-box solution as it seems IE really cant tolerate my cut and stitch web skills

jol
01-10-2010, 06:35 PM
John

- oddly enough in IE8 .. I'm getting it to work "sometimes"

www.industrialarts.co.uk/indexb.html

... sometimes the flash menu loads and sometimes it doesn't. If I keep refreshing - then perhaps 1 in 5 or 10 times, it loads as it should

.. can that be ?

does it give a clue ?

jol
01-10-2010, 09:35 PM
I've been sitting here pressing F5 over and over again in IE8

I see that every 10 or maybe 20 times I refresh, the images in the conveyor - for one reason or another - take a little longer to load

When this happens, the speedway script at the bottom sparks up perfectly - just as it should

So - as an experiment, is there a way to get the speedway script to always start first ?

bozman
01-26-2010, 12:18 AM
I also happen to be playing around with a multiple use conveyor script that I already wrote, upgrading it, and already see how it could be tied in with the above, in place of the single conveyor. But there will be a bit more coding involved before that comes to fruition.

Is there any chance that you might have developed this? I've been tweaking with the leftright script (http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm), so that I have two instances - one on the top of the page scrolling right to left and on the bottom of the page scrolling left to right, and it doesn't seem to be working. So, I have returned back to your script...however, want it to behave similar to the leftrightslide script in that it scrolls onLoad... instead of mouseOver

Another question, instead of declaring pixel widths, is there a way to define widths as percentages? I'm trying to adapt a page so that it will cooperate with multiple screen widths and thus far, using the leftrightslide is not cooperating the way I want.

Any help or insight is greatly appreciated! I come back to DD constantly and love everything you all come up with!!

PowerHungry
06-12-2011, 04:41 AM
Would it be possible to construct 5 conveyor belts going in the same direction, without light box or any of that, just simple href images moving on the conveyor belts and stopping when the mouse goes over a conveyor belt? If so how would I go about creating this?

Thanks a bunch in advance!

jscheuer1
06-12-2011, 04:59 AM
Would it be possible to construct 5 conveyor belts going in the same direction, without light box or any of that, just simple href images moving on the conveyor belts and stopping when the mouse goes over a conveyor belt? If so how would I go about creating this?

Thanks a bunch in advance!

Use:

http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm