Image Slider - Possible?

[gazpot0111645]

Hello i would like to know if anyone here knows how i can make the image at the top of my website into an image slider?

 

Here is my site: http://www.hpgservers.com

 

Many Thanks

Gary

[REVOLUTIONS inc.]

Hello

try http://wowslider.com/ also nivo slider or 3D cute slider all will work well, keep your images low file size and they will load quickly

If you need a developer p.m. me

Edited February 2, 2014 by REVOLUTIONS inc.

[brian!]

your site will already be using jquery, so there will be many free sliders available that will use jquery.

 

it also depends on what you want it to do and your budget - sliders such as wowslider, cute slider 3D etc aren't free for commercial use... though i'm not saying they'd sue you if they found you using it!

 

one simple slider is unslider (unslider.com) - it's very simple to add to a site (never used it on a whmcs site, but it should work without any issues).

[gazpot0111645]

Brian, unslider looks great but i would have a clue where to start with that.

[brian!]

Hi Gary,

 

Brian, unslider looks great but i would have a clue where to start with that.

i'll take a look at it tomorrow afternoon/evening uk time (got to take relative to a hospital appt in the morning! ) - i've got the myhost template somewhere, so i'll see whether its easy to add this to it...

 

are you looking to add this to all your games pages, or just the opening page ?

[gazpot0111645]

Hi Brian, Appreciate your time looking at it. I would like just to add it to my main opening page.

Regards

Gary

[gazpot0111645]

Been trying so hard with this and no luck.

[brian!]

Hi Gary,

 

no it's done... took until Wednesday to get something working though...

 

unslider wasn't working in the myhost template, so I had to take another route... you'll see this tomorrow (Sat).

 

btw - do you know all your order now links don't work - they all generate a 404 page not found error...

Edited February 8, 2014 by brian!

[brian!]

As I said previously, Unslider didn't work in the 'MyHost' template - but that was almost certainly a jQuery and/or css clash and if i'd spent some more time on it, i'm sure I could have got it to work...

 

so, as an alternative, I used the free "Image Slider" from menucool.com - http://www.menucool.com/javascript-image-slider - it doesn't use jQuery, so that was one less hassle to worry about... you should have a look at the demo on their site as there are a lot of options available that i'm not going to be able to cover here.

 

after you have downloaded the source code zip, you will need to do the following:

 

• upload the "themes" folder to your MyHost template folder.
  
• upload the "generic.css" to your MyHost template folder.
  
• add the code below to your MyHost 'header.tpl' template - before {$headoutput}
  

<link href="templates/{$template}/themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="templates/{$template}/themes/1/js-image-slider.js" type="text/javascript"></script>
<link href="templates/{$template}/generic.css" rel="stylesheet" type="text/css" />

in the above example, i'm using Theme 1 - but you can change this if you want to use another one of the themes (see demo to view the options!).

 

• replace (or comment out) the <div class=banner> block at the start of your MyHost 'homepage.tpl' template with the code below:
  

<div class="bannerslider">
    <div id="sliderFrame">
       <div id="slider">
           <img src="templates/{$template}/images/banner.jpg"  alt="#htmlcaption" />
           <img src="templates/{$template}/images/bannerhpg.jpg" alt="Pure Javascript. No jQuery. No flash."  />
           <img src="templates/{$template}/images/banner.jpg" alt="" />
           <a href="http://www.hpgservers.com/game-servers.php">            
              <img src="templates/{$template}/images/bannerhpg.jpg" alt="See All Games" />
           </a>
       </div>
       <div id="htmlcaption" style="display: none;">
           <em>HTML</em> caption. <font color="red">Link</font> to <a href="http://www.google.com/">Google</a>.
       </div>
   </div>
</div>

 

• in 'resources/style.css', you will see the following:
  

.banner{
   background:url(../images/banner.jpg) no-repeat left top;
   height:258px;
   width:960px;
   padding:120px 0 0 20px;
   float:left;
   margin-top:15px;
}

below this, add the code for the bannerslider div:

 

.bannerslider{
   height:378px;
   width:980px;
   padding:0px 0 0 0px;
   float:left;
   margin-top:15px;
}

depending on your image sizes, you may have to play with these numbers to get the layout exactly as you want it.

 

• in 'themes/1/js-image-slider.css', edit these entries:
  

#sliderFrame 
{
   position:relative;
   width:960px;
   margin:0 auto; /*center-aligned*/
}

#slider, #slider div.sliderInner {
   width:960px;height:378px;/* Must be the same size as the slider images */
}

actually, the images i'm using are 980px wide, so you should probably change the '960px' above to '980px' (or whatever size images you're using) - the video below shows the output when the above are set to 960px.

 

• finally, in 'themes/1/js-image-slider.js', change the following:
  

var sliderOptions=
{
   sliderId: "slider",
   startSlide: 0,
   effect: "9",
   effectRandom: false,
   pauseTime: 2600,
   transitionTime: 500,
   slices: 12,
   boxes: 8,
   hoverPause: 1,
   autoAdvance: true,
   captionOpacity: 0.3,
   captionEffect: "fade",
   thumbnailsWrapperId: "thumbs",
   m: false,
   license: "b6t80"
};

I think i've only changed the "effect" value in this to 9 - which slides the next image in from right to left - again, you should refer to the demo to see the effects options you have... btw - they don't have to be the same for every slide... don't worry about the license value above, as you only need to buy a license ($20) if you're using advanced features (videos etc).

 

I should add that in the 'homepage.tpl' code above, i've used two images twice - the default red banner from the MyHost theme (banner.jpg), and your counter strike banner (bannerhpg.jpg).

 

you can add optional links to slides - either to the whole image, or in the text at the bottom... personally, I think i'd be tempted to not add text links, but to photoshop the images with the appropriate text and then link the whole image - but depends what works for your needs.

 

in the above example, the four images use the following features:

 

1. htmlcaption... allows you to add text links and use html in the footer text.
   
2. alternate text... displays text in the footer.
   
3. no text.
   
4. displays "See All Games" in the footer and whole image links to your 'game servers' page.
   

to give you an idea of what it looks like, here's a video of the image slider in action, using the images and code above - i've taken the liberty of using your bg and adding it to the default MyHost template.

 

in practice, the slider animation is smoother and faster than shown on this video, but you'll at least get the idea of how it appears.

 

[video=youtube_share;BKS0gf_g8Po]

 

yeah, it's not the most exciting video you'll ever see on YouTube!

 

for anyone else who would like to add this slider but are using another template, this method should work - the only difference will be where you place the <div id="sliderFrame"> code in your template(s).

 

I think that's everything

[gazpot0111645]

Wow Brian! You have impressed me. All i can say is thank you. Hopefully i can undertake what you have written for me and i will hopefully be able to see the end results on my site. Thank you! Going back to the 404 page. I have set that as i am currently trying to work on something. But much appreciated for spotting it.

Regards

Gary