Natürlich wird das PHP nicht unter dem Javascript feuern. Aber welche Alternative habe ich?

Question

Ich habe ein div, dessen Eigenschaften ich dynamisch ändern möchte. Daher verwende ich jquery.keyframes (plugin).

Die Klasse Sekunde hat ein Low-Res unscharfes Hintergrundbild von croploads Verzeichnis. Jetzt möchte ich das Bild auf die hochauflösende Version mit Keyframes aus dem Verzeichnis croploads2 ändern.

Der Code sieht wie folgt aus:

<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> 

Wie kann ich mit PHP oder eine JavaScript-Variable dies zu erreichen?

Answer 1

Ich sehe nicht so viel falsch mit Ihrem Code. Allerdings ist Ihre PHP-Datei identisch mit der Datei, in die Sie Ihre JS-Datei stellen. Sie könnten etwas wie dieses versuchen:

(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); 

Übrigens; Stellen Sie sicher, dass $ row ['file'] am angegebenen Ort existiert. Der Dateizeiger "croploads/jpeg.jpg" ähnelt eher einer relativen URL. Können Sie auf die relative URL zugreifen? Wenn nicht, warum nicht versuchen, die voll qualifizierte Ressource Adresse wie "http://example.com/croploads/jpeg.jpg" Ich denke, das könnte den Trick tun.