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.

Scrolling Images

View previous topic View next topic Go down

Solved Scrolling Images

Post by Madaragoku on April 17th 2014, 8:03 pm

Hi..
Want to achieve scrolling images(with button to press to scroll) like on this forum :

http://galacticda.forumotion.com/


Last edited by Madaragoku on April 17th 2014, 11:10 pm; edited 1 time in total

Madaragoku
Forumember

Posts : 30
Reputation : 1
Language : English

Back to top Go down

Solved Re: Scrolling Images

Post by Pizza Boi on April 17th 2014, 8:31 pm

Hi Very Happy

Please be more specific, screen shot would help Smile. But here is a code from a wild guess:

Code:
<marquee /><span /><a href="url to page you wanna go"><img src="img link" /></a>

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Scrolling Images

Post by Madaragoku on April 17th 2014, 9:02 pm

Screenshot ---


Madaragoku
Forumember

Posts : 30
Reputation : 1
Language : English

Back to top Go down

Solved Re: Scrolling Images

Post by Pizza Boi on April 17th 2014, 9:17 pm

Hi Very Happy

Oh that's a slider code I gave to the one who made the site. Just find Kite Trojan here and rummage through his profile Smile .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Scrolling Images

Post by Madaragoku on April 17th 2014, 9:26 pm

Is this what u are talikng about??


http://help.forumotion.com/t132193-catagory-toggle-not-working#887784


Can u explain the steps clearly.....basically i want to add images in homepage which can be scrolled

Madaragoku
Forumember

Posts : 30
Reputation : 1
Language : English

Back to top Go down

Solved Re: Scrolling Images

Post by Pizza Boi on April 17th 2014, 9:33 pm

Hi Very Happy

This one http://help.forumotion.com/t131549-nivo-slider-help

I have posted the necessities there so please read through it.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Scrolling Images

Post by Madaragoku on April 17th 2014, 9:47 pm

Shall I have to put this entire code ?? If yes, where : javascript or css ?
CODE:
<center>
<style type="text/css">

/* CSS for jQuery Orbit Plugin 1.2.3
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php



/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
================================================== */
#featured {
width: 717px;
height: 280px;
background: #000 url('https://i48.servimg.com/u/f48/15/88/79/24/loadin10.gif') no-repeat center center;
overflow: hidden; }
#featured>img,
#featured>div,
#featured>a { display: none; }




/* CONTAINER
================================================== */

div.orbit-wrapper {
width: 1px;
height: 1px;
position: relative; }

div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden }

div.orbit>img {
position: absolute;
top: 0;
left: 0;
display: none; }

div.orbit>a {
border: none;
position: absolute;
top: 0;
left: 0;
line-height: 0;
display: none; }

.orbit>div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */


/* TIMER
================================================== */

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right: 10px;
opacity: .6;
cursor: pointer;
z-index: 1001; }

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://i48.servimg.com/u/f48/15/88/79/24/rotato10.png) no-repeat;
z-index: 3; }

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden; }

span.rotator.move {
left: 0 }

span.mask.move {
width: 40px;
left: 0;
background: url(https://i48.servimg.com/u/f48/15/88/79/24/timer-10.png) repeat 0 0; }

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background: url(https://i48.servimg.com/u/f48/15/88/79/24/pause-10.png) no-repeat;
z-index: 4;
opacity: 0; }

span.pause.active {
background: url(https://i48.servimg.com/u/f48/15/88/79/24/pause-10.png) no-repeat 0 -40px }

div.timer:hover span.pause,
span.pause.active {
opacity: 1 }


/* CAPTIONS
================================================== */

.orbit-caption {
display: none;
font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }

.orbit-wrapper .orbit-caption {
background: #000;
background: rgba(0,0,0,.6);
z-index: 1000;
color: #fff;
text-align: center;
padding: 7px 0;
font-size: 13px;
position: absolute;
right: 0;
bottom: 0;
width: 100%; }


/* DIRECTIONAL NAV
================================================== */

div.slider-nav {
display: block }

div.slider-nav span {
width: 78px;
height: 100px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 50%;
margin-top: -50px;
cursor: pointer; }

div.slider-nav span.right {
background: url(https://i48.servimg.com/u/f48/15/88/79/24/right-10.png);
right: 0; }

div.slider-nav span.left {
background: url(https://i48.servimg.com/u/f48/15/88/79/24/left-a10.png);
left: 0; }

/* BULLET NAV
================================================== */

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
bottom: -40px;
left: 50%;
margin-left: -50px;
padding: 0; }

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background: url(https://i48.servimg.com/u/f48/15/88/79/24/bullet10.jpg) no-repeat 4px 0;
width: 13px;
height: 12px;
overflow: hidden; }

.orbit-bullets li.active {
color: #222;
background-position: -8px 0; }

.orbit-bullets li.has-thumb {
background: none;
width: 100px;
height: 75px; }

.orbit-bullets li.active.has-thumb {
background-position: 0 0;
border-top: 2px solid #000; }

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=1.5.1"></script><script type="text/javascript">
/*
* jQuery Orbit Plugin 1.2.3
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(d){d.fn.orbit=function(a){a=d.extend({animation:"horizontal-push",animationSpeed:600,timer:!0,advanceSpeed:6E3,pauseOnHover:!1,startClockOnMouseOut:!1,startClockOnMouseOutAfter:1E3,directionalNav:!0,captions:!0,captionAnimation:"fade",captionAnimationSpeed:600,bullets:!1,bulletThumbs:!1,bulletThumbLocation:"",afterSlideChange:function(){}},a);return this.each(function(){function q(){if(!a.timer||a.timer=="false")return!1;else r.is(":hidden")?s=setInterval(function(){l("next")},a.advanceSpeed):
(o=!0,x.removeClass("active"),s=setInterval(function(){var a="rotate("+m+"deg)";m+=3;t.css({"-webkit-transform":a,"-moz-transform":a,"-o-transform":a});m>180&&(t.addClass("move"),y.addClass("move"));m>360&&(t.removeClass("move"),y.removeClass("move"),m=0,l("next"))},a.advanceSpeed/180))}function n(){if(!a.timer||a.timer=="false")return!1;else o=!1,clearInterval(s),x.addClass("active")}function z(){if(!a.captions||a.captions=="false")return!1;else{var c=e.eq(b).data("caption");(_captionHTML=d(c).html())?
(j.attr("id",c).html(_captionHTML),a.captionAnimation=="none"&&j.show(),a.captionAnimation=="fade"&&j.fadeIn(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideDown(a.captionAnimationSpeed)):(a.captionAnimation=="none"&&j.hide(),a.captionAnimation=="fade"&&j.fadeOut(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideUp(a.captionAnimationSpeed))}}function A(){if(a.bullets)C.children("li").removeClass("active").eq(b).addClass("active");else return!1}function l(c){function d(){e.eq(f).css({"z-index":1});
u=!1;a.afterSlideChange.call(this)}var f=b,g=c;if(f==g)return!1;if(e.length=="1")return!1;u||(u=!0,c=="next"?(b++,b==p&&(b=0)):c=="prev"?(b--,b<0&&(b=p-1)):(b=c,f<b?g="next":f>b&&(g="prev")),A(),e.eq(f).css({"z-index":2}),a.animation=="fade"&&e.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,d),a.animation=="horizontal-slide"&&(g=="next"&&e.eq(b).css({left:h,"z-index":3}).animate({left:0},a.animationSpeed,d),g=="prev"&&e.eq(b).css({left:-h,"z-index":3}).animate({left:0},a.animationSpeed,
d)),a.animation=="vertical-slide"&&(g=="prev"&&e.eq(b).css({top:v,"z-index":3}).animate({top:0},a.animationSpeed,d),g=="next"&&e.eq(b).css({top:-v,"z-index":3}).animate({top:0},a.animationSpeed,d)),a.animation=="horizontal-push"&&(g=="next"&&(e.eq(b).css({left:h,"z-index":3}).animate({left:0},a.animationSpeed,d),e.eq(f).animate({left:-h},a.animationSpeed)),g=="prev"&&(e.eq(b).css({left:-h,"z-index":3}).animate({left:0},a.animationSpeed,d),e.eq(f).animate({left:h},a.animationSpeed))),z())}var b=0,
p=0,h,v,u,f=d(this).addClass("orbit"),c=f.wrap('<div class="orbit-wrapper" />').parent();f.add(h).width("1px").height("1px");var e=f.children("img, a, div");e.each(function(){var a=d(this),b=a.width(),a=a.height();b>f.width()&&(f.add(c).width(b),h=f.width());a>f.height()&&(f.add(c).height(a),v=f.height());p++});if(e.length==1)a.directionalNav=!1,a.timer=!1,a.bullets=!1;e.eq(b).css({"z-index":3}).fadeIn(function(){e.css({display:"block"})});if(a.timer){c.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');
var r=c.children("div.timer"),o;if(r.length!=0){var t=d("div.timer span.rotator"),y=d("div.timer span.mask"),x=d("div.timer span.pause"),m=0,s;q();r.click(function(){o?n():q()});if(a.startClockOnMouseOut){var B;c.mouseleave(function(){B=setTimeout(function(){o||q()},a.startClockOnMouseOutAfter)});c.mouseenter(function(){clearTimeout(B)})}}}a.pauseOnHover&&c.mouseenter(function(){n()});if(a.captions){c.append('<div class="orbit-caption"></div>');var j=c.children(".orbit-caption");z()}if(a.directionalNav){if(a.directionalNav==
"false")return!1;c.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');var k=c.children("div.slider-nav").children("span.left"),w=c.children("div.slider-nav").children("span.right");k.click(function(){n();l("prev")});w.click(function(){n();l("next")})}if(a.bullets){c.append('<ul class="orbit-bullets"></ul>');var C=c.children("ul.orbit-bullets");for(i=0;i<p;i++){k=d("<li>"+(i+1)+"</li>");if(a.bulletThumbs&&(w=e.eq(i).data("thumb")))k=d('<li class="has-thumb">'+
i+"</li>"),k.css({background:"url("+a.bulletThumbLocation+w+") no-repeat"});c.children("ul.orbit-bullets").append(k);k.data("index",i);k.click(function(){n();l(d(this).data("index"))})}A()}})}})(jQuery);
</script><script type="text/javascript">
jQuery(window).load(function() {
jQuery('#featured').orbit();
});
</script>
<div id="featured"> <a href="URL Link"><img src="IMG Link" alt="" style="height: 308px;" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a><a href="URL Link"><img src="IMG Link" alt="" /></a>
</div>
</center>

Madaragoku
Forumember

Posts : 30
Reputation : 1
Language : English

Back to top Go down

Solved Re: Scrolling Images

Post by Pizza Boi on April 17th 2014, 9:52 pm

Hi Very Happy

You can put that anywhere that accepts Html to be honest. Put it in Display < Homepage < Generalities

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Scrolling Images

Post by Madaragoku on April 17th 2014, 9:58 pm

where do i put the image urls ?

Madaragoku
Forumember

Posts : 30
Reputation : 1
Language : English

Back to top Go down

Solved Re: Scrolling Images

Post by Pizza Boi on April 17th 2014, 10:12 pm

Hi Very Happy

I indicated them below...

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Scrolling Images

Post by Madaragoku on April 17th 2014, 10:40 pm

how to specify the size of each image ?

Madaragoku
Forumember

Posts : 30
Reputation : 1
Language : English

Back to top Go down

Solved Re: Scrolling Images

Post by Madaragoku on April 17th 2014, 11:06 pm

Thanks a lot
~Solved

Madaragoku
Forumember

Posts : 30
Reputation : 1
Language : English

Back to top Go down

Solved Re: Scrolling Images

Post by Ange Tuteur on April 17th 2014, 11:21 pm

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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