Jump to content

Changes To Website!


Christian
 Share

Recommended Posts

  • Superuser

Hey all!

 

I've made additional changes to the website! I've implemented a background image with an overlay. We will be extending this system into a gallery/slideshow via JavaScript animation and such.
 


With that said, I've fixed some formatting issues with code blocks, private DMs, and more. I also reformatted the social media icons at the bottom of the website 😃

I would say things are looking a lot better at this moment!

Also added a feedback forum!

  • Like 3
Link to comment
Share on other sites

  • Superuser

Made more changes to the templates including the main page, profiles, and footer. Changed group colors and completed social media links at bottom of the page.

Next up is implementing a slideshow system with functionality to provide probability chances of getting images along with caching five images at a time for up to five minutes or so. Easter egg images (less likely to occur) can give achievements or XP in the future for users 😃

  • Like 2
Link to comment
Share on other sites

  • Superuser

Added basic rotation of backgrounds! I took the code from my old Browser.TF project.

 

          /**
          *	Name: custom_rotationbackground.js
          *	Author: Christian Deacon (Roy)
          *	Note: Rotates background images.
          *	Date: 7-13-16
          **/

          /* Global variables. */
          var g_bRotateInProgress = false;
          var g_iLastRotateNumber = 0;
          var g_bFirstRotateTime = true;

          /* Configurable variables. */
          var g_iFadeOutTime = 1.2;	/* Seconds. */
          var g_iFadeInTime = 1.2;	/* Seconds. */
          var g_iTimer = 30.0			/* Seconds. */
          
       	  const g_sImages = ["{resource="logos/hl2-bg-small.png" app="core" location="front"}", "{resource="backgrounds/thumb-1920-557525.jpg" app="core" location="front"}", "{resource="backgrounds/Skyrim-mods-Bear-Musician.jpg" app="core" location="front"}"];
          /**
          *	Name: rotateBackground();
          *	Description: Rotates the background.
          *	Sub-functions: callback_FirstFade(), callback_secondFade().
          **/
          function rotateBackground()
          {
              /* A rotation is in progress, set this variable to true! */
              g_bRotateInProgress = true;

              /* First, fade out the background. */
              $('#bgimg').fadeTo((g_bFirstRotateTime) ? 0 : g_iFadeOutTime * 1000, 0.0, callback_FirstFade);
          }

          /**
          *	Name: callback_FirstFade();
          *	Description: Called when the first FadeTo is complete.
          *	@return null
          **/
          function callback_FirstFade()
          {
              /* Get a random number between 0 and max range. */
              var i = Math.floor(Math.random() * g_sImages.length);

              /* Ensure the last number isn't the same as the new number. */
              var iAttempts = 0;

              while (g_iLastRotateNumber == i)
              {
                  i = Math.floor(Math.random() * g_sImages.length);

                  iAttempts++;

                  if (iAttempts > 5)
                      break;
              }

              /* Copy the global rotation number. */
              g_iLastRotateNumber = i;

              /* Set the background image. */
              $('#bgimg').css('background', "url(" + g_sImages[i] + ")  no-repeat center center fixed");
              $('#bgimg').css('background-size', "cover");

              /* Fade back in. */
              $('#bgimg').fadeTo(g_iFadeInTime * 1000, 1.0, callback_SecondFade);
          }

          /**
          *	Name: callback_SecondFade();
          *	Description: Called when the last FadeTo is complete.
          *	@return null
          **/
          function callback_SecondFade()
          {
              if (g_bFirstRotateTime)
              {
                  g_bFirstRotateTime = false;
              }

              /* Rotation is no longer in progress. Set the variable back to false. */
              g_bRotateInProgress = false;
          }

          /* Call the first rotate background. */
          $(document).ready(function()
          {
              if (!g_bRotateInProgress)
              {
                  rotateBackground();
              }
          });

          /* Set timer to rotate between background images. */
          setInterval(rotateBackground, g_iTimer * 1000);


* Will be fixing the formatting above shortly! I also need to implement a more in-depth system that supports caching within IPS 4, etc.

  • Like 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...

Important Information

By using this site you agree to the Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.