計算で画像を配置する画像スライダーを作りました
image.pc = my.percentLandscape;
image.style.left = xs - (image.pc / 2) / z * my.size +'px';
画像間のギャップを増やしたい。left プロパティの値を動的に計算する方法。
私はimageFlow http://finnrudolph.de/ImageFlow/Introductionを使用しています
計算で画像を配置する画像スライダーを作りました
image.pc = my.percentLandscape;
image.style.left = xs - (image.pc / 2) / z * my.size +'px';
画像間のギャップを増やしたい。left プロパティの値を動的に計算する方法。
私はimageFlow http://finnrudolph.de/ImageFlow/Introductionを使用しています
cssを修正してみましたか?
.imageflow img { margin: 0 50px;}
そのWebサイトでcssを直接変更しようとしたときに、これはうまくいったようです
編集
申し訳ありませんが、上記の私の解決策は間違っていました。プラグインをダウンロードして詳細を調べました。各画像は絶対位置であり、位置は動的に計算されるため、javascript を変更してスペースを増やす必要があります。
サイトがどこかにアップロードされている場合は、詳細を調べることができますが、Web サイトからダウンロードできるサンプルから、javascript で次のコードを編集できます。
ファイル: imageflow.js
line: 583: image.style.left = xs - (image.pc / 2) / z * my.size + (50 * index) + 'px';
私は追加しました
(50 * index)
そのため、各画像間に 50 ピクセルが追加されます。
編集2
最初の編集で行った変更により、すべての画像が右に移動しました。表示されたインデックスと非表示のインデックスを再計算するだけです。
543行目に、次の行を追加しました
/* Main loop */
var firstImageIndex = -1; <---------------------------------this one
for (var index = 0; index < my.max; index++)
次に、560行目に、次の行を追加しました
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;
次に、編集 1 で編集した行で、ロジックを次のように変更します。
image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (10 * (index - firstImageIndex)) + 'px';
これがわかりにくかったり、機能しない場合はお知らせください。編集した JavaScript をお送りします。
幸運を
編集 3 いくつかの変更を加えました。これらのコードの場所は、編集 2 領域と同じです。
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,
第二部
if (firstImageIndex < 0)
firstImageIndex = index;
var z = (Math.sqrt(10000 + x * x) + 100) * (my.imagesM + scaleLevel);
第3セクション
image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (extraSpaceBetweenImage * (index - firstImageIndex - shiftLeftLevel)) + 'px';
なぜ画像left
とright
余白を設定するのか、これを行うことができます。
次の CSS クラスにマージンを追加します。
.imageflow img {
margin: 0 30px 0 30px; // Add this line in your CSS
}