The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make sliders like this?

View previous topic View next topic 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

View previous topic View next topic Back to top


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