もちろん、PHPはjavascriptで起動しません。しかし、私はどのような選択肢がありますか？

Question

私は動的に変更したいプロパティを持つdivを持っています。 したがって、jquery.keyframes（プラグイン）を使用しています。

クラス秒は、クロールディレクトリからの低解像度のぼやけた背景画像を持っています。今度は、croploads2ディレクトリのキーフレームを使用して、イメージを高解像度版に変更したいと思います。

コードは次のようになります。

<div class="second" style="width:600px; height:auto; background-image:url(croploads/<?php echo $row['file']; ?>); background-repeat:no-repeat;"> 
<img src="croploads2/<?php echo $row['file']; ?>" style="max-width:100%; visibility:hidden;"> 
</div> 

<script> 
$(window).load(function() { 
       $.keyframe.define([{ 

    #preloading the high-res image from croploads2 

         name: 'preload', 
         '0%': {background:'url(croploads2/<?php echo $row['file']; ?>)'} 
        }, { 
         name: 'sharpen', 
         '0%': {background:'url(croploads/<?php echo $row['file']; ?>)', filter: 'blur(100px)'}, 
        '80%': {background:'url(croploads/<?php echo $row['file']; ?>)', 'background-size':'contain', filter: 'blur(80px)', opacity: '1'}, 
        '100%': {background:'url(croploads2/<?php echo $row['file']; ?>)', 'background-size':'contain', filter: 'blur(0px)', opacity: '1'} 
        }]); 
        }); 
</script> 

は、どのように私はこれを達成するために、PHPやJavaScript変数を使用できますか？

Answer 1

あなたのコードにはそれほど間違いはありません。しかし、あなたのPHPファイルがあなたのJSを置くファイルと同じである限り、あなたは次のようなものを試すことができます：

(function($) { 
    /** jQuery Document Ready */ 
    $(document).ready(function(){ 
    $.keyframe.define([{ 
     //preloading the high-res image from croploads2 
        name: 'preload', 
        '0%': {background:'url(croploads2/<?php echo $row['file']; ?>)'} 
       }, { 
        name: 'sharpen', 
        '0%': {background:'url(croploads/<?php echo $row['file']; ?>)', filter: 'blur(100px)'}, 
       '80%': {background:'url(croploads/<?php echo $row['file']; ?>)', 'background-size':'contain', filter: 'blur(80px)', opacity: '1'}, 
       '100%': {background:'url(croploads2/<?php echo $row['file']; ?>)', 'background-size':'contain', filter: 'blur(0px)', opacity: '1'} 
       }]); 
       }); 
    }); 
})(jQuery); 

ところで、 $ row ['file']が指定された場所に存在することを確認してください。ファイルポインタ "croploads/jpeg.jpg"は相対URLのように見えます。そのような相対URLにアクセスできますか？そうでない場合は、「http://example.com/croploads/jpeg.jpg」 のような完全修飾リソースアドレスを試してみてください。