Json Webring - Neocities

Jquery & Json webring tutorial [DEMO]

Want to create your own webring that rotates through your friends websites & is easy to update? lets go!

First you need to include jquery inside your websites header tags:

 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Then we need to include this after including the jquery from above changing the NeocitiesURL var to your own Neocities URL



    var NeocitiesURL = "YOURNEOCITIES URL"; 
    $.getJSON(NeocitiesURL+"webring.json", function(json) {
      let members = Object.keys(json)
      var GetCurrent =  window.location.hostname;
      var next = members[(members.indexOf(GetCurrent[0]) + 1) % members.length];
      var prev = members[(members.indexOf(GetCurrent[0]) - 1) % members.length];
      if(!prev){
         var prev = members[(members.indexOf(GetCurrent[0]) + 2) % members.length];
            console.log(prev)
      }
      if(!next){
        var next = members[(members.indexOf(GetCurrent[0]) - 2) % members.length];
      }
      if(prev){
        $("#prev").html('<a href="'+json[prev]+'" alt="'+prev+'">[Previous] '+prev+'</a>');
      }
      if(next){
          $("#next").html('<a href="'+json[next]+'" alt="'+next+'">'+next+' [Next]</a>');
      }

});

Now go to your neocities control panel and create a new file called webring.json

Open your newly created file and structure it like so:


{
  "site1name": "site1URL",
  "site2name": "site2URL",
  "site3name": "site3URL"
}

Replacing "sitename" with the site name and "siteURL" with the URL

We then need to put the HTML code on the page you wish to display your new webring!


<div id="webring"><span id="prev"></span>::<span id="next"></span></div>

And thats it! your new Jquery & Json webring is done and you should have something that looks like this:

webringimg