[RESOLVED] Is it possible to attach a style to an image in an array?

[Suresure]

I'm not even sure if I'm asking the right thing: I've got a sequence of images that can be clicked through but I'd like a few - not all - of the images to be shunted a certain number of pixels to the right.
I don't know if there's a way to attach a style determining the position of an image (maybe 2.png in the example below) relative to the position of images in the rest of the sequence whilst leaving the rest alone?

<script type="text/javascript">
function preload(arr) {
for(var i=0; i<arr.length; i++) (new Image()).src = arr[i];
}
var picsA = ["1.png", "2.png", "3.png", "4.png", "5.png", "6.png"];
preload(picsA);
var index = 0; picNumberA = 0;
function showNextPicA() {
if (picNumberA == (picsA.length -1)) {
picNumberA = 0;
} else {
picNumberA = picNumberA + 1;
}
document.getElementById('placeholderA').src = picsA[picNumberA];
}
</script>

I'm really sorry to be straying so far beyond my understanding and so grateful for any help - thanks for reading so far!

[TheBearMay]

Something like this might work:

<script type="text/javascript">
function preload(arr) {
for(var i=0; i<arr.length; i++) (new Image()).src = arr[i];
}
var picsA = ["1.png", "2.png", "3.png", "4.png", "5.png", "6.png"];
var styleA = [0,10,0,0,0];
preload(picsA);
var index = 0; picNumberA = 0;
function showNextPicA() {
if (picNumberA == (picsA.length -1)) {
picNumberA = 0;
} else {
picNumberA = picNumberA + 1;
}
document.getElementById('placeholderA').src = picsA[picNumberA];
document.getElementById('placeholderA').style.marginLeft=styleA[picNumberA]+"px";
}
</script>

Might have to use paddingLeft instead marginLeft - not where I can test at the moment....

[Suresure]

Oh my gosh you did it! Record response time? That works a treat! Thank you so much! That really saves the day!

Uh... now I feel ungrateful but I've suddenly got a part two...

Basically these sequences are also drag and drop-able, thanks to an external .js file and initiated like this:

<img src="1.png" id="placeholderA" class="dragableElement" onClick="return showNextPicA();">

The problem I've created is that when you release from dragging, the onClick="return showNextPicA();" kicks in.

Is there any way to stop this happening when the 'click' is part of a drag? I was trying:

ondragend="return false;"

but that's probably nonsense. Again, I'm well over my head and so amazed by the knowledge around here - thanks again TheBearMay!

[TheBearMay]

I've been playing around, but can't seem to come up with a sandbox example that will bubble the way you're describing it. Is there somewhere I can grab the code you're using at the moment?

[Suresure]

Sorry, I should have done that! Thanks for having a go:

http://www.suresure.co.uk/Temp/drag.html

and here's the code I'm using:

http://www.suresure.co.uk/Temp/dragable-content.js

The first click/drag is unresponsive then every drag after that seems doomed to also a click. Thanks again for this, I really appreciate it.

[TheBearMay]

Sorry about the delay, but I believe I may have a way around this finally. Tried canceling the Click event, but when I did that the drag didn't work so a couple things to do:

1. Insert the line:

   var lastMove;

   at the top of the drag script (right after the comment block is as good a place as any).
   
2. Insert this code as the last line of the function moveDragableElement:

   lastMove = new Date();

3. Insert this code as the first line of your function showNextPicA

   if (new Date() - lastMove < 500) return false;

Code simply makes sure that there is a 500ms pause between the last movement of the image and taking action on the onclick event - you can play around with the 500ms in the last line to suit your sensitivity on the click.

[Suresure]

I can't believe you persisted with this - it works beautifully! Thank you so much - I wish I had some knowledge to give back! Really, massive thanks for this.

[TheBearMay]

Hang around here long enough and keep trying things and asking questions, the knowledge will come.