Editing the Custom Slider

With later releases of our software, we have included a custom code widget which automatically slides through on the intranet between 3 images. Even without coding knowledge, you can have the ability to swap out the images and link references if you wish by making edits to the code.

As a disclaimer, our support team is unable to assist with custom code, or tweaks to the code provided here.

If you would like a more simplified version of this code for simple sliders, please see the following Did You Know video by clicking here. Scroll down to the section "Implementing the Banner Widget".

 

Images:
For the images, there are links within the code that reference a specific image file on your web server where the intranet is being hosted. As long as you have network access to view these files, you should be able to add in additional image files and change the path within the code to reference these images instead.

First, how do we find out which image you are looking to replace? I would recommend using Google Chrome and wait or slide to the image you are looking to change:
1) Right-click on the image > choose 'inspect element'
2) In your developer tools window that pops up, you will see a list of images which you can hover over to see which is the right image and the path to that image on the web server:

image.png

In the above image, hovering over the highlighted text also highlights the image you are looking for. In this example, the background color which shows a preview below the outlined path, shows the image we are looking at. 

3) Using the path found here when hovering over the image you wish to change, navigate on your web server to the file under: /intranet/Site/Custom/images

4) Add the image you wish to replace it with into this same folder and change the name of the file within the custom code script. As an example, ../intranet/Site/Custom/images/discussion-bg.png will become /intranet/Site/Custom/images/newfilename.png 

 

Changing the code:

5) To make this change within the custom code, use Ctrl + F on your keyboard to search for the name of this file: discussion-bg.png:

change.png

6) Replace the discussion-bg.png name with the name of your new image and click 'save widgets' below to see the change reflected.

Steps 1-6 will need to be repeated for each image you wish to change.

 

Link changes:

7) Lastly, as you are updating images, it is possible that you wish to have users be sent off to other areas of your site. Within our code provided, you can find the following 3 links by searching for 'forum', 'apps', or 'forms' respectively:

src="Custom/images/discussion-button.png" onclick="JavaScript: $.ic.computeLink('/Forum/view_items.cfm?MenuID=16&CategoryID=1')

src="Custom/images/companynews-button-01.png" onclick="JavaScript: $.ic.computeLink('../Apps/view_items.cfm?menuID=5044&categoryID=1')

src="Custom/images/docs-button-01.png" onclick="JavaScript: $.ic.computeLink('../Forms/view.cfm?appID=7')

The above are examples of the links to the specific areas in the software that users will be directed to. To replace these links, you can use the same format to direct them to the specific path as you see above here. To grab the path, navigate to your app or page of choice and copy the URL. You will need to strip out the first part of the link, including '/intranet' if that happens to be in your path, and then provide the relative link you are left with.

For example, If I want employees to go to the Employee Directory, I would take the following link: 

http://sqboxsupport4/intranet/EmployeeDirectory/view.cfm?appID=4

Remove the additional pieces of the link and be left with:

/EmployeeDirectory/view.cfm?appID=4

 

I have included a copy of the custom slider code as well as the images that were used within this example that can be added to your site. To add the image files included, extract the files and copy the intranet folder over top of your web server's intranet folder > select 'merge' when prompted.

Have more questions? Submit a request

0 Comments

Article is closed for comments.