Increase Left Property Dynamically

I have made image slider in which images are placed by calculating image.pc = my.percentLandscape; image.style.left = xs - (image.pc / 2) / z * my.size +'px'; I want to increase

Solution 1:

have you tried modifying the css?

.imageflow img { margin: 0 50px;}

This seems to worked when i tried to modify the css directly on that website

EDIT

Sorry my solution above was wrong, I downloaded the plug-in and looked in details. Because each images are absolute position and position is dynamically calculated, you have to modify the javascript to have more spaces.

If you have your site uploaded somewhere, then i can look into more details but from the sample you can download from the web site, you can edit following code in the javascript

file: imageflow.js

line: 583: image.style.left = xs - (image.pc / 2) / z * my.size + (50 * index) + 'px';

I've added

(50 * index)

so it will have 50 more pixels between each images.

EDIT 2

because of the changes i made in my first Edit, it has shifted all the image to the right. It just need re-calculate the displayed index vs hidden index.

in line 543, i added following line

/* Main loop */
var firstImageIndex = -1;   <---------------------------------this one
for (var index = 0; index < my.max; index++)

Then in line 560, added following line

else
{
   if (firstImageIndex < 0)  <---------------------------------this line
      firstImageIndex = index; <-------------------------------this line

   var z = (Math.sqrt(10000 + x * x) + 100) * (my.imagesM + 5);
   var xs = x / z * my.size + my.size;

Then on the line we edited in Edit 1, change the logic to following

image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (10 * (index - firstImageIndex)) + 'px';

Let me know if this is too confusing, or doesn't work, i'll send you the javascript that i edited.

Good luck

Edit 3 I've made few modification, location of these codes are same as the Edit 2 area.

First section
    /* Main loop */
    var firstImageIndex = -1;
    var scaleLevel = 5; // higher the number, it will scale it smaller
    var extraSpaceBetweenImage = 100; //extra Space Between Images measured by px
    var shiftLeftLevel = 4; // shift the for image element to the left,

2nd section

if (firstImageIndex < 0)
     firstImageIndex = index;

var z = (Math.sqrt(10000 + x * x) + 100) * (my.imagesM + scaleLevel);

3rd section

image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (extraSpaceBetweenImage * (index - firstImageIndex - shiftLeftLevel)) + 'px';

Solution 2:

image.pc = my.percentLandscape;
image.style.left = (( (xs - (image.pc / 2)) / z) * my.size )+'px';

Assuming xs, image.pc, z, and my.size is number

Solution 3:

You can do this, why setting image left and right margins.

Add margin in the following CSS class:

.imageflow img {
    margin: 0 30px 0 30px; // Add this line in your CSS
}