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

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.

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?

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 @Mark 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.

@Mark
Forumember

Male Posts : 187
Reputation : 37
Language : HTML | CSS | Javascript | C | Java
Location : Republic of the Philippines

http://help.forumotion.com/

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?

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?

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.

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 @Mark on May 25th 2014, 9:02 pm

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

@Mark
Forumember

Male Posts : 187
Reputation : 37
Language : HTML | CSS | Javascript | C | Java
Location : Republic of the Philippines

http://help.forumotion.com/

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.

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

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 @Mark 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>

@Mark
Forumember

Male Posts : 187
Reputation : 37
Language : HTML | CSS | Javascript | C | Java
Location : Republic of the Philippines

http://help.forumotion.com/

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.

Base
Forumaster

Male Posts : 10386
Reputation : 1687
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

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

Base
Forumaster

Male Posts : 10386
Reputation : 1687
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