Queria um código desse Slide ou semelhante. Qui 26 Dez 2013 - 22:38
Qual é minha questão:
Então eu gostaria de saber se é possivel fazer um slide (não sei bem se é um slide)ou me passar o script e me ensinar como aplicar
seria igual esse:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Eu até consegui fazer algo tipo isso no meu forum...
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
copiando desse ai, ai gostaria de saber como faço para colocar aquele efeito e se tem como fazer. :s
ouvi dizer que é por javascript então, por isso estou pedindo se não for muito incomodo.
Desde já agradeço.
Forum ou site onde vi isso: xbox360iso.com
Editando...
Bom eu fuçando consegui fazer um progresso não sei se pode me ajudar agora: então vamos por partes.
Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Versão:
PunBB
Então eu gostaria de saber se é possivel fazer um slide (não sei bem se é um slide)ou me passar o script e me ensinar como aplicar
seria igual esse:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Eu até consegui fazer algo tipo isso no meu forum...
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
copiando desse ai, ai gostaria de saber como faço para colocar aquele efeito e se tem como fazer. :s
ouvi dizer que é por javascript então, por isso estou pedindo se não for muito incomodo.
Desde já agradeço.
Forum ou site onde vi isso: xbox360iso.com
Editando...
Bom eu fuçando consegui fazer um progresso não sei se pode me ajudar agora: então vamos por partes.
- Spoiler:
CSS:
- Código:
#recently{
display:block;
width: 100%;
height:240px;
padding:1px;
background: #FFFFFF;
border: 1px solid #eaeaea;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#scrollable {}
#scrollable_content { width: 100%;}
#recently-header { height: 25px; background: url("http://www.xbox360iso.com/css/tpl_box_bar.png") repeat-x; }
#recently-title { float: left; }
#recently-nav {float: right; margin-right: 5px; width: 112px;}
a.prev, a.next { display:block; cursor:pointer; width:19px; height:19px; background-repeat:no-repeat; margin: 3px 0 0 0;}
a.prev { background:url(http://www.xbox360iso.com/css/button-left.png); float: left;}
a.prev:hover { background:url(http://www.xbox360iso.com/css/button-left-over.png); }
a.next { background:url(http://www.xbox360iso.com/css/button-right.png); float: left; }
a.next:hover { background:url(http://www.xbox360iso.com/css/button-right-over.png); }
div.navi { position:relative; width: 42px; height: 0px; float: left; margin: 6px 3px 0 3px;}
div.navi span { width:8px; height:8px; float:left; margin:3px; background:url(http://www.tubeiso.com/images/scrollable/dots.png) 0 0 no-repeat; cursor:pointer; }
div.navi span:hover { background-position:0 -8px; }
div.navi span.active { background-position:0 -16px; }
div.items {
height:200px;
margin:0;
float:left;
width: 100% !important;
}
div.items a { display:block; float:left; margin-right: 14px; width:100px; height:136px; color:#32b6e6; text-decoration:none; text-align:center; cursor:pointer; }
div.items img { border: 1px solid #32b6e6; }
div.items img:hover { border: 1px solid #6ad5ff; }
#login-title, #statistic-title, #online-title,#vote-title,#populartags-title,
#adv-title, #latestvideo-title, #profiledetail-title,
#recenttags-title, #userinfo-title, #mediumbox-title,
#recently-title, #fullbox-title, #myprofile-title,#invitefriend-title,#invitenewfriend-title,
#mostactive-title, #topwatched-title, #signup-title, #viewvideo-title,
#bookmark-title, #videocomment-title, #othervideo-title, #relatedvideo-title,
#relatedtag-title,#recently-added-title,#browsegroup-title, #smallbox-title,
#videodetails-title, #sharedetails-title, #myvideo-title, #myfriends-title,
#groups-title, #groupforum-title, #grouprecentvideo-title,#small-rightbox-title {
height: 25px;
padding-left: 10px;
background: url("http://www.xbox360iso.com/css/tpl_box_bar.png") repeat-x;
font: normal 19px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
letter-spacing: -1px;
color:#727272;
}
Javascript nomeado como: mousewheel.js
- Código:
/* Copyright (c) 2006 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* $LastChangedDate$
* $Rev$
*
* Version: @VERSION
*
* Requires: $ 1.2.2+
*/
(function($) {
$.event.special.mousewheel = {
setup: function() {
var handler = $.event.special.mousewheel.handler;
// Fix pageX, pageY, clientX and clientY for mozilla
if ( $.browser.mozilla )
$(this).bind('mousemove.mousewheel', function(event) {
$.data(this, 'mwcursorposdata', {
pageX: event.pageX,
pageY: event.pageY,
clientX: event.clientX,
clientY: event.clientY
});
});
if ( this.addEventListener )
this.addEventListener( ($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
else
this.onmousewheel = handler;
},
teardown: function() {
var handler = $.event.special.mousewheel.handler;
$(this).unbind('mousemove.mousewheel');
if ( this.removeEventListener )
this.removeEventListener( ($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
else
this.onmousewheel = function(){};
$.removeData(this, 'mwcursorposdata');
},
handler: function(event) {
var args = Array.prototype.slice.call( arguments, 1 );
event = $.event.fix(event || window.event);
// Get correct pageX, pageY, clientX and clientY for mozilla
$.extend( event, $.data(this, 'mwcursorposdata') || {} );
var delta = 0, returnValue = true;
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
if ( $.browser.opera ) delta = -event.wheelDelta;
event.data = event.data || {};
event.type = "mousewheel";
// Add delta to the front of the arguments
args.unshift(delta);
// Add event to the front of the arguments
args.unshift(event);
return $.event.handle.apply(this, args);
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
})(jQuery);
Javascript nomeado: scrollable.js
- Código:
/**
* jquery.scrollable 0.11. Making HTML elements scroll.
*
* http://flowplayer.org/tools/scrollable.html
*
* Copyright (c) 2008 Tero Piirainen (tero@flowplayer.org)
*
* Released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* >> Basically you can do anything you want but leave this header as is <<
*
* Since : 0.01 - 03/01/2008
* Version: 0.11 - 05/29/2008
*/
(function($) {
// plugin initialization
$.fn.extend({
scrollable: function(arg1, arg2, arg3) {
return this.each(function() {
if (typeof arg1 == "string") {
var el = $.data(this, "scrollable");
el[arg1].apply(el, [arg2, arg3]);
} else {
new $.scrollable(this, arg1, arg2);
}
});
}
});
// constructor
$.scrollable = function(el, opts) {
// store this instance
$.data(el, "scrollable", this);
this.init(el, opts);
};
// methods
$.extend($.scrollable.prototype, {
init: function(el, config) {
// current instance
var self = this;
var opts = {
size: 5,
horizontal:false,
activeClass:'active',
speed: 300,
onSeek: null,
// jquery selectors
items: '.items',
prev:'.prev',
next:'.next',
navi:'.navi',
naviItem:'span'
};
this.opts = $.extend(opts, config);
// root / itemRoot
var root = this.root = $(el);
var itemRoot = $(opts.items, root);
if (!itemRoot.length) itemRoot = root;
// wrap itemRoot.children() inside container
itemRoot.css({position:'relative', overflow:'hidden', visibility:'visible'});
itemRoot.children().wrapAll('<div class="__scrollable" style="position:absolute"/>');
this.wrap = itemRoot.children(":first");
this.wrap.css(opts.horizontal ? "width" : "height", "200000em").after('<br clear="all"/>');
this.items = this.wrap.children();
this.index = 0;
// set height based on size
if (opts.horizontal) {
itemRoot.width(opts.size * (this.items.eq(1).offset().left - this.items.eq(0).offset().left) -2);
} else {
itemRoot.height(opts.size * (this.items.eq(1).offset().top - this.items.eq(0).offset().top) -2);
}
// mousewheel
if ($.isFunction($.fn.mousewheel)) {
root.bind("mousewheel.scrollable", function(event, delta) {
self.move(-delta, 50);
return false;
});
}
// keyboard
$(window).bind("keypress.scrollable", function(evt) {
if ($(evt.target).parents(".__scrollable").length) {
if (opts.horizontal && (evt.keyCode == 37 || evt.keyCode == 39)) {
self.move(evt.keyCode == 37 ? -1 : 1);
return false;
}
if (!opts.horizontal && (evt.keyCode == 38 || evt.keyCode == 40)) {
self.move(evt.keyCode == 38 ? -1 : 1);
return false;
}
}
return true;
});
// item.click()
this.items.each(function(index, arg) {
$(this).bind("click.scrollable", function() {
self.click(index);
});
});
this.activeIndex = 0;
// prev
$(opts.prev, root).click(function() { self.prev() });
// next
$(opts.next, root).click(function() { self.next() });
// navi
$(opts.navi, root).each(function() {
var navi = $(this);
var status = self.getStatus();
// generate new entries
if (navi.is(":empty")) {
for (var i = 0; i < status.pages; i++) {
var item = $("<" + opts.naviItem + "/>").attr("page", i).click(function() {
var el = $(this);
el.parent().children().removeClass(opts.activeClass);
el.addClass(opts.activeClass);
self.setPage(el.attr("page"));
});
if (i == 0) item.addClass(opts.activeClass);
navi.append(item);
}
// assign onClick events to existing entries
} else {
navi.children().each(function(i) {
var item = $(this);
item.attr("page", i);
if (i == 0) item.addClass(opts.activeClass);
item.click(function() {
item.parent().children().removeClass(opts.activeClass);
item.addClass(opts.activeClass);
self.setPage(item.attr("page"));
});
});
}
});
},
click: function(index) {
var item = this.items.eq(index);
var klass = this.opts.activeClass;
if (!item.hasClass(klass) && (index >= 0 || index < this.items.size())) {
var prev = this.items.eq(this.activeIndex).removeClass(klass);
item.addClass(klass);
this.seekTo(index - Math.floor(this.opts.size / 2));
this.activeIndex = index;
}
},
getStatus: function() {
var len = this.items.size();
var s = {
length: len,
index: this.index,
size: this.opts.size,
pages: Math.floor(len / this.opts.size),
page: Math.floor(this.index / this.opts.size)
};
return s;
},
// all other seeking functions depend on this generic seeking function
seekTo: function(index, time) {
if (index < 0) index = 0;
index = Math.min(index, this.items.length - this.opts.size);
var item = this.items.eq(index);
if (item.size() == 0) return false;
this.index = index;
if (this.opts.horizontal) {
var left = this.wrap.offset().left - item.offset().left;
this.wrap.animate({left: left}, time || this.opts.speed);
} else {
var top = this.wrap.offset().top - item.offset().top;
this.wrap.animate({top: top}, time || this.opts.speed);
}
// custom onSeek callback
if ($.isFunction(this.opts.onSeek)) {
this.opts.onSeek.call(this.getStatus());
}
// navi status update
var navi = $(this.opts.navi, this.root);
if (navi.length) {
var klass = this.opts.activeClass;
var page = Math.round(index / this.opts.size);
navi.children().removeClass(klass).eq(page).addClass(klass);
}
return true;
},
move: function(offset, time) {
this.seekTo(this.index + offset, time);
},
next: function(time) {
this.move(2, time);
},
prev: function(time) {
this.move(-2, time);
},
movePage: function(offset, time) {
this.move(this.opts.size * offset, time);
},
setPage: function(index, time) {
this.seekTo(this.opts.size * index, time);
},
prevPage: function(time) {
var page = Math.floor(this.index / this.opts.size);
this.seekTo(this.opts.size * (page-1), time);
},
nextPage: function(time) {
var page = Math.floor(this.index / this.opts.size);
this.seekTo(this.opts.size * (page+1), time);
},
begin: function(time) {
this.seekTo(0, time);
},
end: function(time) {
this.seekTo(this.items.size() - this.opts.size, time);
}
});
})(jQuery);
O Codigo para colocar onde eu quero:
- Código:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("#scrollable").scrollable({horizontal:true,size:8});
});
</script>
<div id="recently">
<div id="scrollable">
<div id="recently-header">
<div id="recently-title">Latest Releases:
</div>
<div id="recently-nav"><a class="prev"></a>
<div class="navi">
<span class="active" page="0">
</span>
</div><a class="next"></a>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
<div id="recently-content">
<div class="arrow-general">
</div>
<div id="scrollable_content">
<div style="position: relative; overflow: hidden; visibility: visible; width: 910px;" class="items">
<div style="position: absolute; width: 200000em;" class="__scrollable">
<a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1385813215.jpg" /><br />Rugby League Live 2 World Cup Edition - PAL</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1385587717.jpg" /><br />Injustice: Gods Among Us Ultimate Edition - RF</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1385036357.jpg" /><br />The Walking Dead GOTY - RF</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384946356.jpg" /><br />Zoo Tycoon - PAL</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384946292.jpg" /><br />Young Justice Legacy - RF</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384946109.jpg" /><br />Zumba Kids - NTSC/PAL</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384946079.jpg" /><br />BandFuse Rock Legends - NTSC</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384730619.jpg" /><br />DuckTales Remastered - NTSC/U</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384624195.jpg" /><br />Need For Speed Rivals - RF</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384432105.jpg" /><br />Adventure Time Explore the Dungeon Because I DONT KNOW - RF</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384432105.jpg" /><br />Adventure Time Explore the Dungeon Because I DONT KNOW - RF</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384432105.jpg" /><br />Adventure Time Explore the Dungeon Because I DONT KNOW - RF</a><a href="http://www.xbox360iso.com/xbox360-dvd-game-f24.html?f=24"><img src="http://s1.xbox360iso.com/gamepics/1384432105.jpg" /><br />Adventure Time Explore the Dungeon Because I DONT KNOW - RF</a>
</div><br clear="all" />
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</div>
e por ultimo.
tem um js que acho que seja a library:
- Código:
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js
Esses todos eu instalei no meu Forum de teste menos esse ultimo pois não sei como faz quando tento instalar normalmente lá nos modulos depois que aperto submit a tela fica toda branca.
e ficou com esse resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
É otimo porem as setinhas não funcionam :/ ai acho que seja pela Library faltando tem como me ensinar como instalar?
Desculpe o topico extenso é que eu estou tentando em vez de ficar tudo só nas costas de vocês que sei que é complicado, então me desculpe.
Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Versão:
PunBB
