How to make sliders like this?

Go down

Solved How to make sliders like this?

Post by Anim3 on May 24th 2014, 12:06 pm

How can I make sliders like this forum has?
http://animeph.4umer.com/forum


Last edited by Anim3 on May 27th 2014, 2:16 pm; edited 1 time in total
avatar
Anim3
New Member

Male Posts : 24
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Tommy Lee on May 24th 2014, 12:22 pm

You need to code it. I'm sure another member will be able to assist you. In the meantime try discover by searching the internet.
avatar
Tommy Lee
Forumember

Posts : 232
Reputation : 7
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Anim3 on May 25th 2014, 12:14 pm

Didn't find anything...does anyone know how to make it?
avatar
Anim3
New Member

Male Posts : 24
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Guest on May 25th 2014, 1:03 pm

Put this on your Admin Panel > Display > Homepage > Generalities > Homepage message > Message Content:
Code:
<div class="jimgMenu">
<ul>
       
      <li id="landscapes">
         <a>Landscapes</a> 
      </li>
       
      <li id="people">
         <a>People</a> 
      </li>
       
      <li id="nature">
         <a>Nature</a> 
      </li>
       
      <li id="abstract">
         <a>Abstract</a> 
      </li>
       
      <li id="urban">
         <a>Urban</a> 
      </li>
       
   </ul>
</div>



<style>
.jimgMenu {
  position: relative;
  width: 1000px;
  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#landscapes a {
  background: url(IMAGE1) repeat scroll 0%;

}

.jimgMenu ul li#people a {
  background: url(IMAGE2) repeat scroll 0%;
}

.jimgMenu ul li#nature a {
  background: url(IMAGE3) repeat scroll 0%;
}
.jimgMenu ul li#abstract a {
  background: url(IMAGE4) repeat scroll 0%;
}

.jimgMenu ul li#urban a {
  background: url(IMAGE5) repeat scroll 0%;
  
}

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


<script>
jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4;}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},easeInBounce:function(x,t,b,c,d){return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b;}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b;}});
</script>

<script>jQuery.extend(jQuery.easing,{easeIn:function(x,t,b,c,d){return jQuery.easing.easeInQuad(x,t,b,c,d);},easeOut:function(x,t,b,c,d){return jQuery.easing.easeOutQuad(x,t,b,c,d);},easeInOut:function(x,t,b,c,d){return jQuery.easing.easeInOutQuad(x,t,b,c,d);},expoin:function(x,t,b,c,d){return jQuery.easing.easeInExpo(x,t,b,c,d);},expoout:function(x,t,b,c,d){return jQuery.easing.easeOutExpo(x,t,b,c,d);},expoinout:function(x,t,b,c,d){return jQuery.easing.easeInOutExpo(x,t,b,c,d);},bouncein:function(x,t,b,c,d){return jQuery.easing.easeInBounce(x,t,b,c,d);},bounceout:function(x,t,b,c,d){return jQuery.easing.easeOutBounce(x,t,b,c,d);},bounceinout:function(x,t,b,c,d){return jQuery.easing.easeInOutBounce(x,t,b,c,d);},elasin:function(x,t,b,c,d){return jQuery.easing.easeInElastic(x,t,b,c,d);},elasout:function(x,t,b,c,d){return jQuery.easing.easeOutElastic(x,t,b,c,d);},elasinout:function(x,t,b,c,d){return jQuery.easing.easeInOutElastic(x,t,b,c,d);},backin:function(x,t,b,c,d){return jQuery.easing.easeInBack(x,t,b,c,d);},backout:function(x,t,b,c,d){return jQuery.easing.easeOutBack(x,t,b,c,d);},backinout:function(x,t,b,c,d){return jQuery.easing.easeInOutBack(x,t,b,c,d);}});
</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> 

<script type="text/javascript">
jQuery().ready(function() {
   jQuery('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'});
   });
</script>

Just change the IMAGE1, IMAGE2, IMAGE3, IMAGE4 and IMAGE5 with your images links.

Guest
Guest


Back to top Go down

Solved Re: How to make sliders like this?

Post by Anim3 on May 25th 2014, 8:47 pm

It works fine....but one more thing, how can I link posts through pictures?
avatar
Anim3
New Member

Male Posts : 24
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Tommy Lee on May 25th 2014, 8:53 pm

Do you mean post images?
avatar
Tommy Lee
Forumember

Posts : 232
Reputation : 7
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Anim3 on May 25th 2014, 8:57 pm

I want/need that when I click on the picture (that is on slider) directs me on the specific post/link, just like on the forum I posted.
avatar
Anim3
New Member

Male Posts : 24
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Guest on May 25th 2014, 9:02 pm

Add this attributes inside the < a > tag:
Code:
href="LINKHERE"

Guest
Guest


Back to top Go down

Solved Re: How to make sliders like this?

Post by Anim3 on May 25th 2014, 9:13 pm

Sorry, but I don't understand where exactly to add it.
avatar
Anim3
New Member

Male Posts : 24
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Anim3 on May 27th 2014, 2:17 pm

Thanks for the help Smile
avatar
Anim3
New Member

Male Posts : 24
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Guest on May 27th 2014, 2:19 pm

Saw your reply only now. Do you get it now? Like this one:
Code:
<a href="LINK HERE">Title of link</a>

Guest
Guest


Back to top Go down

Solved Re: How to make sliders like this?

Post by Base on May 27th 2014, 7:59 pm

Hello,

Is this solved? You have marked the topic as solved.
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: How to make sliders like this?

Post by Anim3 on May 27th 2014, 11:03 pm

Yes it is Smile
avatar
Anim3
New Member

Male Posts : 24
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make sliders like this?

Post by Base on May 27th 2014, 11:09 pm

Solved => Archived
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Back to top


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