The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Scrolling Image Menu

3 posters

Go down

Solved Scrolling Image Menu

Post by Wonderstruck June 13th 2013, 5:23 am

I hope this is the right place to put this, I don't normally post for coding help...I'm not sure what to call this but it's like a menu with pictures. I found this code but it doesn't scroll on it's own. I would love one to scroll on it's own so you don't have to mouse over each slide.


Code:
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery.js"></script>
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery-easing-1.3.pack.js"></script>
<script
 type="text/javascript"
src="http://www.alohatechsupport.net/js/jquery-easing-compatibility.1.2.pack.js"></script>

<script type="text/javascript">
jQuery(document).ready(function () {
  // find the elements to be eased and hook the hover event
  jQuery('div.jimgMenu ul li a').hover(function() { 
    // if the element is currently being animated
    if (jQuery(this).is(':animated')) {
 
 Ã‚    jQuery(this).addClass("active").stop().animate({width: "310px"},
{duration: 450, easing: "easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
 
 Ã‚    jQuery(this).addClass("active").stop().animate({width: "310px"},
{duration: 400, easing: "easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if (jQuery(this).is(':animated')) {
 
 Ã‚    jQuery(this).removeClass("active").stop().animate({width: "78px"},
{duration: 400, easing: "easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
 
 Ã‚   
jQuery(this).removeClass("active").stop(':animated').animate({width:
"78px"}, {duration: 450, easing: "easeInOutQuad", complete:
"callback"});
    }
  });
});
</script>

<style>

.jimgMenu {
  position: relative;
  width: 670px;
  height: 200px;
  overflow: hidden;
  margin: 25px 0px 0px;
}

.jimgMenu ul {
  list-style: none;
  margin: 0px;
  display: block;
  height: 200px;
  width: 1340px;
 
  }

.jimgMenu ul li {
  float: left;
}

.jimgMenu ul li a {
  text-indent: -1000px;
  background:#FFFFFF none repeat scroll 0%;
  border-right: 2px solid #fff;
  cursor:pointer;
  display:block;
  overflow:hidden;
  width:78px;
  height: 200px;
}

.jimgMenu ul li.slide-one a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/landscapes.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-two a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-three a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.slide-four a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/abstract.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-five a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/urban.jpg) repeat scroll 0%;
  min-width:310px;
 
}

.clear {
  clear: both;
}
</style>

<div class="jimgMenu">
  <ul>
    <li class="slide-one"><a href="#">Hello!</a></li>
    <li class="slide-two"><a href="#">Forumotion</a></li>
    <li class="slide-three"><a href="#">Coding</a></li>
    <li class="slide-four"><a href="#">Support</a></li>
    <li class="slide-five"><a href="#">Mark</a></li>
  </ul>
</div>

The code was found in this thread:

https://help.forumotion.com/t124163-jquery-image-menu-cool-slide?highlight=menu

This is what I want but, I want it to scroll is there any possible way this can happen? I have see it on 2 other sites.

Here is my forum link if needed:
http://www.moonscompanion.net/forum# (it's a new site)
Wonderstruck
Wonderstruck
Forumember

Female Posts : 73
Reputation : 4
Language : English

http://www.moonscompanion.net/forum

Back to top Go down

Solved Re: Scrolling Image Menu

Post by kirk June 13th 2013, 5:41 pm

Is this now solved? 
you have the solved icon showing?
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: Scrolling Image Menu

Post by Wonderstruck June 14th 2013, 4:40 am

Yeah, I was just about to edit my first post to say I found what I needed but I had to go to work.

 Sorry!
Wonderstruck
Wonderstruck
Forumember

Female Posts : 73
Reputation : 4
Language : English

http://www.moonscompanion.net/forum

Back to top Go down

Solved Re: Scrolling Image Menu

Post by SLGray June 14th 2013, 4:41 am

Garbaged as no solution was given.


Scrolling Image Menu Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum