PHP Bilder mit Link ausstatten mittels Button (Joomla)

Blechdose · 17. Oktober 2010

Hallo Community,

ich stehe gerade etwas auf dem Schlauch. Folgendes Problem: In einem Editor (WYSIWYG von einem Joomla-System) habe ich ein Bild eingefügt. Außerhalb des Editor habe ich einen Button. Dieser Button soll beim Anklicken (und vorherigen markieren des Bildes im Editor) das Bild zu sich selbst verlinken. Nun weiß ich nicht recht, wie ich anfangen soll. Ich bräuchte eventuell noch ein paar Tipps. Kann ich das überhaupt alleine mit PHP realisieren?
Meine Überlegung war die, dass eben der HTML-Code des Bildes durch den verlinkten HTML-Code ersetzt wird. Hat jemand vielleicht eine Idee?

Vielen Dank schon mal für eure Bemühungen!

Blechdose · 20. Oktober 2010

Hat keiner eine Idee?

Gerstensaft · 20. Oktober 2010

Kenne mich mit Joomla nicht aus, aber ich würde das mit JavaScript realisieren. Wenn du mal ein bissel Code postest, kann ich dir vlt. was fixes schreiben. Ansonsten sind solche Sachen auch mit PHP möglich. Allerdings hast du da den Nachteil, dass die Seite erst wieder neu vom Server geladen werden muss.

EaglePipe · 20. Oktober 2010

Blechdose · 20. Oktober 2010

Naja was ich bereits habe, habe ich mir größtenteils bei etwas vorhandenem abgeschaut. Ich habe quasi eine "Maske", ich poste einfach mal den relevanten Code:

PHP:

function onDisplay($name)
    {
        global $mainframe;

        $doc         =& JFactory::getDocument();
        $template     = $mainframe->getTemplate();

        

        $getContent = $this->_subject->getContent($name);
        $present = JText::_('ALREADY EXISTS', true) ;
        $js = "
            function insertHover(editor) {
                var content = $getContent
                if (content.match(/<hr\s+id=(\"|')system-readmore(\"|')\s*\/*>/i)) {
                    alert('$present');
                    return false;
                } else {
                    jInsertEditorText('rel=\"shadowbox\"', editor);
                  // Hier sollte das Relevante hin
                }
            }
            ";

        $doc->addScriptDeclaration($js);

        $button = new JObject();
        $button->set('modal', false);
        $button->set('onclick', 'insertHover(\''.$name.'\');return false;');
        $button->set('text', JText::_('Hover'));
        $button->set('name', 'hover');
        
        $button->set('link', '#');

        return $button;
    }

Mein "Bild" hat vorher eben folgenden Code:

HTML:

<img alt="Bild" src="MeineBilddatei.jpg">

Und braucht nachher eben folgenden;

HTML:

<a href="MeineBildddatei.jpg" rel="shadowbox"><img alt=""  src="MeineBilddatei.jpg"></a>

Vielleicht wird das so klarer. Mit dem Code oben kann ich zwar den rel="shadowbox"-Teil einfügen, allerdings ist das nicht nur unschön, sondern auch nicht ganz die Lösung.

Gerstensaft · 21. Oktober 2010

moin,

also wenn ich dich richtig verstanden habe, möchtest du bei einem klick auf einen button das bild verlinken?

mein erster ansatz mit javascript sieht so aus.

HTML:

<div id="bild">
<img alt="Bild" src="MeineBilddatei.jpg">
</div>

irgendwo auf der seite ist dann ein button:

HTML:

<input type="button" value="klick" onclick="machWat()"/>

zu letzt der javascript teil:

HTML:

<script type="text/javascript">
function machWat() {
	var domRef = document.getElementById("bild");
	var imgTag = domRef.innerHTML;
	var src = domRef.getElementsByTagName("img")[0].src;
	domRef.innerHTML = "<a href='"+src+"' rel='shadowbox'>"+imgTag+"</a>";
}
</script>

das ganze müsste dann noch angepasst werden. je nach dem welches bild markiert wurde. gibt es eine checkbox?

gruss

Blechdose · 21. Oktober 2010

Hallo und danke für die Antwort.

Habe es mit deinem Code versucht, leider ohne Erfolg (weiße Seite).
Weißt du wie ich von meinem markierten Bild die URL auslesen kann?
Ich stelle mir das so vor;

PHP:

function insertHover(editor) {
                var content = $getContent;
                // Einlesen der URL des markierten Bildes
                <?php $URL = ??? ?>

                if (content.match(/<hr\s+id=(\"|')system-readmore(\"|')\s*\/*>/i)) {
                    alert('$present');
                    return false;
                } else {

                // Anschließend einfach die eingelesene URL einfügen lassen
                    jInsertEditorText('<a rel=\"shadowbox\" href=\"<?php echo $URL ?>\"><img scr=\"<?php echo $URL ?>\" /> </a>', editor);
                    
                

                }
                


            }

Gerstensaft · 21. Oktober 2010

Naja, wenn du das serverseitig umsetzt (also mit php), dann weiß man ja i.d.R. wo die Bilder liegen. Dann packst du einfach als Value-Wert der Checkbox die URL des Bildes und liest das per Php aus (GET oder POST).

Bin momentan auf der Arbeit. Ich kann heute Abend mal was geeignetes basteln.

Gruß

Blechdose · 21. Oktober 2010

Der URL zum Bild ändert sich immer, da es immer wieder andere Bilder sind. Ich denke, dass mit dem URL auslesen lässt sich mit JavaScript am besten machen?!

Gerstensaft · 21. Oktober 2010

du kannst das schon mit php realisieren. wenn die bilder dynamsich hinzugefügt werden, wird das in der regel über eine variable realisiert. die gleiche variable schreibst du in eine checkbox, womit du das bild auswählst.

das ganze würde dann in etwa so aussehen:

PHP:

echo "<img alt='Bild' src='" . $bild . "'>";
echo "<input type='checkbox' name='bildauswahl' value=' . $bild . ' />;

dann vergleichst du einfach die beiden variablen und passt den link bei bedarf an.

PHP:

if ( $_POST['bildauswahl'] == $bild ) {
echo "<a href='". $bild ."' rel='shadowbox'><img alt='Bild' src='" . $bild . "'></a>";
} else {
echo "<img alt='Bild' src='" . $bild . "'>";
}

hab das gerade nur hier im forums-editor runter getippt. kann also gut sein, dass nen fehler im code ist.

wobei ich immer noch der meinung bin, dass man das mit javascript eleganter lösen kann.

Blechdose · 21. Oktober 2010

Vielen Dank dafür schon mal, werde es morgen mal damit versuchen...
Allerdings glaube ich auch, dass ich dazu Javascript brauche. Die Seite darf ja im Prinzip nicht neu geladen werden, da sonst der Inhalt des Editors weg ist.

Aber nun hab ich schon ein paar gute Ansätze, mal schauen, ob ich es damit realisieren kann.

Suche

PHP Bilder mit Link ausstatten mittels Button (Joomla)

Blechdose

Ensign

Blechdose

Ensign

Gerstensaft

Cadet 2nd Year

EaglePipe

Lt. Commander

Blechdose

Ensign

Gerstensaft

Cadet 2nd Year

Blechdose

Ensign

Gerstensaft

Cadet 2nd Year

Blechdose

Ensign

Gerstensaft

Cadet 2nd Year

Blechdose

Ensign