1

私はWordpressのウェブサイトを構築しています。私がローカルサーバーやテストサーバー、または私のコードで作業していないことを気にしないでください。私がこのプログラミングビットを理解しようとしている間、それは現時点では厄介です。私のウェブサイトに行くと、jcarousel内にある上部に沿って画像の列が表示されます。

動作しますが、「ポートレート」の写真に到達するまで次にヒットすると、ギャップがあります。ギャップは、カルーセルが正しく機能するために、HTMLまたはCSS内でピクセル単位で幅を設定する必要があるためです。に設定するautoと、カルーセルが折りたたまれます。私には理にかなっていますが、それを回避できないのはイライラします。「風景」と「ポートレート」の写真の高さを同じ427にしたいのですが、幅を実際の画像サイズに合わせて調整したいと思います。

ですから、3日間遊んだ後、このビットは理解できたと思います。使用したカルーセルコードの数はわかりません。もともとそれが問題だと思っていましたが、問題もありました。各画像スライドの幅はJavaScript内で設定されていることがわかったので、幅を640にすると、現在と同じ結果が得られます。

私の最初の質問はこれです：

Wordpress（作成者）用に特別に作成されたサーバー上のディレクトリから画像を呼び出しています。コードは次のとおりです。

<?php
$uploads = wp_upload_dir();

if ($dir = opendir($uploads['basedir'].'/picture-atlantic')) {
$images = array();
while (false !== ($file = readdir($dir))) {
    if ($file != "." && $file != "..") {
        $images[] = $file; 
    }
}
closedir($dir);
}

echo '<ul>';
foreach($images as $image) {
echo '<li><img src="';
echo $uploads['baseurl'].'/picture-atlantic/'.$image;
echo '" alt="" width="auto" height="auto" /></li>';
 }
echo '</ul>';
?>

ご覧のとおり、picture-atlanticディレクトリから呼び出して、順序付けられていないリスト内に表示しています。これは、私のjcarouselで何らかの理由で必要になります。

最後に、これと同じコードを使用して画像を取得し、実際のサイズで表示するにはどうすればよいですか？上記のコードで、幅と高さを定義すると、すべての画像に対してそれが行われます。ただし、前述したように、異なるサイズを使用するポートレート写真があります。私はこのコードを見つけました：erikastokes.com/php/how-to-get-image-size-with-php.php、しかし私はそれを私の既存のコードに実装する方法がわかりません。

誰かが私がそれを書き直すのを手伝ってくれませんか？

4

2 に答える 2

1

画像の幅を に設定し100%、スタイルを追加して縦向きの画像を に再配置top: -50%;できますが、横向きの場合は画像全体を見ることができません。

幅 100%、上部 -50%

<?php
$uploads = wp_upload_dir();

if ($dir = opendir($uploads['basedir'].'/picture-atlantic')) {
$images = array();
while (false !== ($file = readdir($dir))) {
    if ($file != "." && $file != "..") {
        $images[] = $file; 
    }
}
closedir($dir);
}

echo '<ul>';
foreach($images as $image) {
  $myimage = $uploads['baseurl'].'/picture-atlantic/'.$image;
  $size = getimagesize($myimage);
  $top_50 = '';
  if($size[1] > $size[0]) {
    $top_50 = 'style="position: realative; top: -50%;"';
  }
  echo '<li><img src="';
  echo $uploads['baseurl'].'/picture-atlantic/'.$image;
  echo '" alt="" width="100%" height="auto" '.$top_50.'/></li>';
 }
echo '</ul>';
?>
于 2013-01-30T19:50:52.170 に答える
0

ウェルプ、既に php を使用して画像を動的に表示している場合、getimagesize を使用できないことを読みました。最終的には、Wordpress を介して画像を順不同のリストにアップロードし、カルーセル マークアップをポスト ループに配置することにしました。今は問題なく動作します。

ああ、私はhttp://www.css-tricks.comで、Wordpress が画像属性を自動的に追加することを読みました。これにより、横向きと縦向きのスタイルの写真を画面全体に 100% 表示する際の画像幅の問題が解決されました。

同様のタスクを実行しようとしている人は、画像を挿入するために jj nexgen gallery を使用しないでください。jj nexgen gallery は、それに関連する他のプラグインと同様に優れたプラグインです。画像に属性を追加しないため、私がやろうとしていたことにはうまくいきません。あなたがこれをしようとしていなければ、私は彼らのワードプレスプラグインをダウンロードするでしょう。

返信ありがとうございます。

于 2013-01-31T04:37:55.587 に答える