thanks again!

2 answers

Mottie 1134
0
points
This was chosen as the best answer

You could use some scripting to center the image dependent on your screen resolution, try adding this:

// Center panel image
var imageWidth = 2000;
var imageLeftPadding = 50; // 50 pixels to left to show optimal 1024 view window
function setSize(){
 var winWidth = $(window).width();
 if (winWidth <= imageWidth) {
  adjustment = imageWidth/2 - winWidth/2 + imageLeftPadding;
 } else {
  adjustment = 0;
 }
 $('.anythingSlider .wrapper ul').css('left', -adjustment + 'px');
}
$(window).resize(function(){
 setSize();
})
setSize();

Edit: I also noticed the amount of code you are using for the navigation buttons and I think you could make your life easier by adding the required data to the HTML and let the script do everything else. Here is what I would do:

  • Change the id's (<div id="thumbNav"> and <div id="thumbNav2">) to a class (<div class="thumbNav">)

  • Then reformat the thumbNav HTML like this:

     <div class="thumbNav" rel="1">
      <a href="#"><img id="homenav" src="images/homebutton.png" data-active="images/homebutton2.png" border="none"> </a>
     </div>
    
    • The rel="1" points to the anythingSlider panel #, so 1 = Home, 2 = Interactive, etc.

    • The image has an additional parameter called "data-active" and contains the active image url

I made a demo of it here. I will remove the file after you get the idea :)

Answered over 6 years ago by Mottie
0
points

Dude, thanks a ton. That all makes alot of sense now that I see it in front of me... I'm still relatively new to js, so a lot of the potential use still evades me... I really appreciate it man!

Answered over 6 years ago by KyleBooth