Achtergrondafbeelding keuzeknop voor bericht

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Achtergrondafbeelding keuzeknop voor bericht

Bericht van TonnyKamper op ma 23 jul 2018 - 0:07

Achtergrondafbeelding keuzeknop voor bericht


Deze tutorial stelt je in staat om de ​​knop aan de editor toe te voegen waarmee je een achtergrondafbeelding voor een bericht kunt kiezen, zie voorbeeld:

1. De CSS :


Ga naar:
Beheerderspaneel Display Kleuren - CSS Tab

Voeg de volgende CSS code onderaan uw stijlsheet toe:
Code:
div.sceditor-container iframe, div.sceditor-container textarea {
  background: transparent;
}
.postbg {
  background-position: 0 0; background-repeat: repeat;
}

2. Het Javascript :


Ga naar:
Beheerderspaneel Modules Javascript beheer - Maak Nieuw Javascript

Titel: Achtergrondfoto berichten
Plaatsing: Alle pagina's
Code:
$(function() {
  $("div.postbody").each(function() {
    var n = this;
    if($(".post-entry", n).length) {
      n = $(".post-entry", n)[0]
    }else {
      if($(".content", n).length) {
        n = $(".content", n)[0]
      }
    }
    while(n.nodeType != 3 && n.hasChildNodes()) {
      n = n.childNodes[0]
    }
    if(n.nodeType != 3) {
      return;
    }
    if(n.nodeValue.substr(0, 8) != "[postbg=") {
      return;
    }
    var m = n.nodeValue.match(/^\[postbg=([^\]]*)\]/);
    if(!m) return;
    $(this).closest("div.post-container,div.post,td.row1,td.row2,div.postmain").addClass("postbg").css("background-image", "url(" + m[1] + ")");
    n.nodeValue = n.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, "");
    if(!n.nodeValue && n.nextSibling && n.nextSibling.nodeType == 1 && n.nextSibling.tagName == "BR") {
      $(n.nextSibling).remove()
    }
  });
  if($("#text_editor_textarea").length && $.sceditor) {
    var bglist = "https://i.imgur.com/20aRJFn.png,https://i.imgur.com/DcTM2Ng.jpg,https://i.imgur.com/tkC3deY.jpg,https://i.imgur.com/pfTcnqF.png,https://i.imgur.com/dAQtdaR.gif,https://i.imgur.com/48CU2Qx.png,https://i.imgur.com/lRuwoVi.png,https://i.imgur.com/EHp45H1.png,https://i.imgur.com/8bhbqFF.png,https://i.imgur.com/tb80sYG.png,https://i.imgur.com/6LPhzcp.png,https://i.imgur.com/DkRuYf1.png,https://i.imgur.com/57F0z86.jpg,https://i.imgur.com/PZyMuXF.png".split(",");
    var bgnum = -1;
    var val = $("#text_editor_textarea").val();
    if(val.substr(0, 8) == "[postbg=") {
      var m = val.match(/^\[postbg=([^\]]*)\]/);
      if(m) {
        var r = $.inArray(m[1], bglist);
        if(r != -1) {
          bgnum = r
        }else {
          bgnum = bglist.length - 1
        }
        $(function() {
          $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px");
          $(".sceditor-container").css("background-image", "url(" + m[1] + ")")
        });
        $("#text_editor_textarea").val(val.replace(/^\[postbg=[^\[]*\]/, ""))
      }
    }
    $(function() {
      if(!$("#text_editor_textarea").sceditor("instance")) {
        return
      }
      $('<a class="sceditor-button" unselectable="on" title="Fond de message"><div unselectable="on" style="background:url(https://i.imgur.com/Hrf5w1i.gif);opacity:1">Fond de message</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
        if(e.ctrlKey) {
          $(".sceditor-container").css("background-image", "");
          bgnum = -1
        }else {
          bgnum++;
          if(!bgnum) {
            $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px")
          }
          $(".sceditor-container").css("background-image", "url(" + bglist[bgnum % bglist.length] + ")")
        }
      })
    });
    $(function() {
      $('form[name="post"]').submit(function() {
        if(bgnum != -1) {
          $("#text_editor_textarea").val(function(i, val) {
            return"[postbg=" + bglist[bgnum % bglist.length] + "]" + val
          })
        }
      })
    })
  }
});

3. Achtergrondafbeeldingen wijzigen :


Je kunt de lijst met achtergrondafbeeldingen wijzigen door de volgende afbeeldings url's in dit gedeelte van het script te wijzigen:
Code:
var bglist = "https://i.imgur.com/20aRJFn.png,https://i.imgur.com/DcTM2Ng.jpg,https://i.imgur.com/tkC3deY.jpg,https://i.imgur.com/pfTcnqF.png,https://i.imgur.com/dAQtdaR.gif,https://i.imgur.com/48CU2Qx.png,https://i.imgur.com/lRuwoVi.png,https://i.imgur.com/EHp45H1.png,https://i.imgur.com/8bhbqFF.png,https://i.imgur.com/tb80sYG.png,https://i.imgur.com/6LPhzcp.png,https://i.imgur.com/DkRuYf1.png,https://i.imgur.com/57F0z86.jpg,https://i.imgur.com/PZyMuXF.png"
Je moet de afbeeldingsadressen (url's) plaatsen en ze scheiden met komma's, behalve na de laatste.

4. Tips :



  • Het is ook mogelijk om een ​​afbeelding die niet in de lijst staat te plaatsen door dit handmatig aan het begin van het bericht te plaatsen:
    Code:
    [postbg=http://url_van_afbeelding]
    Vervang hierin http://url_van_afbeelding door de url van de afbeelding van je keuze!
  • bij elke klik op de knop, laten we onderaan de volgende afbeelding van de lijst zien, door te klikken met de ingedrukte ctrl toets, wordt de onderste verwijderd en die gaat terug naar het begin van de lijst.



avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum