Scrolling Image Menu
3 posters
Page 1 of 1
Scrolling Image Menu
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.
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)
- 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)
Re: Scrolling Image Menu
Is this now solved?
you have the solved icon showing?
you have the solved icon showing?
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Scrolling Image Menu
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!
Sorry!
Re: Scrolling Image Menu
Garbaged as no solution was given.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum