2016-08-09 8 views
0

meine intention ist es, eine wordpress vorlagendatei zu erstellen, in der bestimmte bilder mit php überschrieben werden, indem ein shortcode verwendet wird, der in den posts erscheint.PHP Template - Überschreibe Hintergrundbild mit PHP Shortcode

Das Szenario: 1) Ich verwende die sliderrevolution Plugin und definieren das Hintergrundbild eines bestimmten Schieber als placeholder.jpg 2) ich den Shortcode in meine Seite legen und wenn die bestimmte Datei, in diesem Fall: Platzhalter. jpg wird gefunden, es wird ersetzt durch sagen wir: post-one.jpg.

Meine Absicht ist es, den gleichen Schieberegler in verschiedenen Posts zu verwenden und alles durch Shortcodes zu ersetzen.

Das funktioniert gut mit Text, aber ich fand keine Möglichkeit, die Bilder dynamisch zu ändern. Natürlich haben die Bilder die gleiche Größe wie die, die ich ersetzen möchte.

Hoffentlich kann mir jemand helfen, danke im Voraus.

Ich habe den Code unten versucht, aber ich bekomme es nicht zur Arbeit. Dies ist der HTML-Code, den ich "ändern" möchte.

EDIT:

Vielen Dank für Ihre schnelle Antwort;) Ich Code versucht mit, aber ich nicht es an der Arbeit :(

Dies ist der HTML-Code des Bildes I ersetzt werden soll :

<div class="tp-bgimg defaultimg" style="width: 100%; height: 100%; opacity: 1; visibility: inherit; z-index: 20; background-image: url(&quot;http://localhost/wp-content/uploads/revslider/fashion/fashion_bg1.jpg&quot;); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: center center; background-repeat: no-repeat;" src="http://localhost/wp-content/uploads/revslider/fashion/fashion_bg1.jpg"></div></code> 

habe ich versucht, mehrere Codes, wie es Artikel nicht etwas ändern:

<script> 
$("tp-bgimg defaultimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 
$("tp-bgimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 
$("defaultimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 

$("#tp-bgimg defaultimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 
$("#tp-bgimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 
$("#defaultimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 

$(".tp-bgimg defaultimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 
$(".tp-bgimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 
$(".defaultimg").attr("src", "http://localhost/wp-content/uploads/2016/08/logo.png"); 

</script> 

Hast du eine Idee, was ich falsch mache? Das Skript befindet sich in der Kopfzeile und ist aufrufbar (es wurde eine Warnung zum Testen verwendet).

Antwort

1

Sie können jQuery verwenden, um ein vorhandenes Element dynamisch auszublenden und stattdessen etwas anderes anzuzeigen.

wäre ein gutes Beispiel dafür sein:

$("#img1").attr("src", "path/to/new_img.jpg"); 
Verwandte Themen