Slide de noticias no forum

[bruno.alexandre.98]

• Descrição:

Boas , eu preciso de ajuda, queria por no meu forum um slide de noticias igual a este : http://www.tugavicio.com/forum , com hiperligaçoes diretas , ou seja esta a passar a imagem e ao clicar em cima vai para a pagina pertendida ...

---

• Informações:

Fórum:	http://lbncomunidade.forumeiros.com.pt	Versão:	PHPBB3
Tipo:	Pedido de código	Tags:	Slide,noticias,phpbb3

---

[Shek]

Olá!

Leia este tutorial: https://ajuda.forumeiros.com/t73793-tutorial-slidebar-com-imagens

Até mais!

[bruno.alexandre.98]

Ja fiz tudo como esta no tutorial , mas fica muito pequeno , e quero uma imagem de cada vez a passar e nao passa, tao as duas imagens uma ou lado da outra -.- resolvam me isto sff

[bruno.alexandre.98]

Podiam me responder e me ajudar com um mini tutorial ?

[Daemon]

Olá,
primeiro vá em gestão de códigos javascript, e crie um novo adicionando o seguinte código investido no índice:

Código:

(function (a) {
    var b = function (p, G) {
        var d = a.extend({}, a.fn.nivoSlider.defaults, G);
        var e = {
            currentSlide: 0,
            currentImage: "",
            totalSlides: 0,
            running: false,
            paused: false,
            stop: false
        };
        var f = a(p);
        f.data("nivo:vars", e);
        f.css("position", "relative");
        f.addClass("nivoSlider");
        var g = f.children();
        g.each(function () {
            var u = a(this);
            var r = "";
            if (!u.is("img")) {
                if (u.is("a")) {
                    u.addClass("nivo-imageLink");
                    r = u
                }
                u = u.find("img:first")
            }
            var s = u.width();
            if (s == 0) {
                s = u.attr("width")
            }
            var t = u.height();
            if (t == 0) {
                t = u.attr("height")
            }
            if (s > f.width()) {
                f.width(s)
            }
            if (t > f.height()) {
                f.height(t)
            }
            if (r != "") {
                r.css("display", "none")
            }
            u.css("display", "none");
            e.totalSlides++
        });
        if (d.randomStart) {
            d.startSlide = Math.floor(Math.random() * e.totalSlides)
        }
        if (d.startSlide > 0) {
            if (d.startSlide >= e.totalSlides) {
                d.startSlide = e.totalSlides - 1
            }
            e.currentSlide = d.startSlide
        }
        if (a(g[e.currentSlide]).is("img")) {
            e.currentImage = a(g[e.currentSlide])
        } else {
            e.currentImage = a(g[e.currentSlide]).find("img:first")
        }
        if (a(g[e.currentSlide]).is("a")) {
            a(g[e.currentSlide]).css("display", "block")
        }
        f.css("background", 'url("' + e.currentImage.attr("src") + '") no-repeat');
        f.append(a('<div class="nivo-caption"><p></p></div>').css({
            display: "none",
            opacity: d.captionOpacity
        }));
        var h = function (t) {
            var r = a(".nivo-caption", f);
            if (e.currentImage.attr("title") != "" && e.currentImage.attr("title") != undefined) {
                var s = e.currentImage.attr("title");
                if (s.substr(0, 1) == "#") {
                    s = a(s).html()
                }
                if (r.css("display") == "block") {
                    r.find("p").stop().fadeOut(t.animSpeed, function () {
                        a(this).html(s);
                        a(this).stop().fadeIn(t.animSpeed)
                    })
                } else {
                    r.find("p").html(s)
                }
                r.stop().fadeIn(t.animSpeed)
            } else {
                r.stop().fadeOut(t.animSpeed)
            }
        };
        h(d);
        var i = 0;
        if (!d.manualAdvance && g.length > 1) {
            i = setInterval(function () {
                q(f, g, d, false)
            }, d.pauseTime)
        }
        if (d.directionNav) {
            f.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + d.prevText + '</a><a class="nivo-nextNav">' + d.nextText + "</a></div>");
            if (d.directionNavHide) {
                a(".nivo-directionNav", f).hide();
                f.hover(function () {
                    a(".nivo-directionNav", f).show()
                }, function () {
                    a(".nivo-directionNav", f).hide()
                })
            }
            a("a.nivo-prevNav", f).live("click", function () {
                if (e.running) {
                    return false
                }
                clearInterval(i);
                i = "";
                e.currentSlide -= 2;
                q(f, g, d, "prev")
            });
            a("a.nivo-nextNav", f).live("click", function () {
                if (e.running) {
                    return false
                }
                clearInterval(i);
                i = "";
                q(f, g, d, "next")
            })
        }
        if (d.controlNav) {
            var k = a('<div class="nivo-controlNav"></div>');
            f.append(k);
            for (var l = 0; l < g.length; l++) {
                if (d.controlNavThumbs) {
                    var m = g.eq(l);
                    if (!m.is("img")) {
                        m = m.find("img:first")
                    }
                    if (d.controlNavThumbsFromRel) {
                        k.append('<a class="nivo-control" rel="' + l + '"><img src="' + m.attr("rel") + '" alt="" /></a>')
                    } else {
                        k.append('<a class="nivo-control" rel="' + l + '"><img src="' + m.attr("src").replace(d.controlNavThumbsSearch, d.controlNavThumbsReplace) + '" alt="" /></a>')
                    }
                } else {
                    k.append('<a class="nivo-control" rel="' + l + '">' + (l + 1) + "</a>")
                }
            }
            a(".nivo-controlNav a:eq(" + e.currentSlide + ")", f).addClass("active");
            a(".nivo-controlNav a", f).live("click", function () {
                if (e.running) {
                    return false
                }
                if (a(this).hasClass("active")) {
                    return false
                }
                clearInterval(i);
                i = "";
                f.css("background", 'url("' + e.currentImage.attr("src") + '") no-repeat');
                e.currentSlide = a(this).attr("rel") - 1;
                q(f, g, d, "control")
            })
        }
        if (d.keyboardNav) {
            a(window).keypress(function (r) {
                if (r.keyCode == "37") {
                    if (e.running) {
                        return false
                    }
                    clearInterval(i);
                    i = "";
                    e.currentSlide -= 2;
                    q(f, g, d, "prev")
                }
                if (r.keyCode == "39") {
                    if (e.running) {
                        return false
                    }
                    clearInterval(i);
                    i = "";
                    q(f, g, d, "next")
                }
            })
        }
        if (d.pauseOnHover) {
            f.hover(function () {
                e.paused = true;
                clearInterval(i);
                i = ""
            }, function () {
                e.paused = false;
                if (i == "" && !d.manualAdvance) {
                    i = setInterval(function () {
                        q(f, g, d, false)
                    }, d.pauseTime)
                }
            })
        }
        f.bind("nivo:animFinished", function () {
            e.running = false;
            a(g).each(function () {
                if (a(this).is("a")) {
                    a(this).css("display", "none")
                }
            });
            if (a(g[e.currentSlide]).is("a")) {
                a(g[e.currentSlide]).css("display", "block")
            }
            if (i == "" && !e.paused && !d.manualAdvance) {
                i = setInterval(function () {
                    q(f, g, d, false)
                }, d.pauseTime)
            }
            d.afterChange.call(this)
        });
        var n = function (v, r, s) {
            for (var t = 0; t < r.slices; t++) {
                var u = Math.round(v.width() / r.slices);
                if (t == r.slices - 1) {
                    v.append(a('<div class="nivo-slice"></div>').css({
                        left: u * t + "px",
                        width: v.width() - u * t + "px",
                        height: "0px",
                        opacity: "0",
                        background: 'url("' + s.currentImage.attr("src") + '") no-repeat -' + (u + t * u - u) + "px 0%"
                    }))
                } else {
                    v.append(a('<div class="nivo-slice"></div>').css({
                        left: u * t + "px",
                        width: u + "px",
                        height: "0px",
                        opacity: "0",
                        background: 'url("' + s.currentImage.attr("src") + '") no-repeat -' + (u + t * u - u) + "px 0%"
                    }))
                }
            }
        };
        var o = function (v, w, x) {
            var r = Math.round(v.width() / w.boxCols);
            var s = Math.round(v.height() / w.boxRows);
            for (var t = 0; t < w.boxRows; t++) {
                for (var u = 0; u < w.boxCols; u++) {
                    if (u == w.boxCols - 1) {
                        v.append(a('<div class="nivo-box"></div>').css({
                            opacity: 0,
                            left: r * u + "px",
                            top: s * t + "px",
                            width: v.width() - r * u + "px",
                            height: s + "px",
                            background: 'url("' + x.currentImage.attr("src") + '") no-repeat -' + (r + u * r - r) + "px -" + (s + t * s - s) + "px"
                        }))
                    } else {
                        v.append(a('<div class="nivo-box"></div>').css({
                            opacity: 0,
                            left: r * u + "px",
                            top: s * t + "px",
                            width: r + "px",
                            height: s + "px",
                            background: 'url("' + x.currentImage.attr("src") + '") no-repeat -' + (r + u * r - r) + "px -" + (s + t * s - s) + "px"
                        }))
                    }
                }
            }
        };
        var q = function (r, s, t, u) {
            var v = r.data("nivo:vars");
            if (v && v.currentSlide == v.totalSlides - 1) {
                t.lastSlide.call(this)
            }
            if ((!v || v.stop) && !u) {
                return false
            }
            t.beforeChange.call(this);
            if (!u) {
                r.css("background", 'url("' + v.currentImage.attr("src") + '") no-repeat')
            } else {
                if (u == "prev") {
                    r.css("background", 'url("' + v.currentImage.attr("src") + '") no-repeat')
                }
                if (u == "next") {
                    r.css("background", 'url("' + v.currentImage.attr("src") + '") no-repeat')
                }
            }
            v.currentSlide++;
            if (v.currentSlide == v.totalSlides) {
                v.currentSlide = 0;
                t.slideshowEnd.call(this)
            }
            if (v.currentSlide < 0) {
                v.currentSlide = v.totalSlides - 1
            }
            if (a(s[v.currentSlide]).is("img")) {
                v.currentImage = a(s[v.currentSlide])
            } else {
                v.currentImage = a(s[v.currentSlide]).find("img:first")
            }
            if (t.controlNav) {
                a(".nivo-controlNav a", r).removeClass("active");
                a(".nivo-controlNav a:eq(" + v.currentSlide + ")", r).addClass("active")
            }
            h(t);
            a(".nivo-slice", r).remove();
            a(".nivo-box", r).remove();
            var w = t.effect;
            if (t.effect == "random") {
                var x = new Array("sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse");
                w = x[Math.floor(Math.random() * (x.length + 1))];
                if (w == undefined) {
                    w = "fade"
                }
            }
            if (t.effect.indexOf(",") != -1) {
                var x = t.effect.split(",");
                w = x[Math.floor(Math.random() * x.length)];
                if (w == undefined) {
                    w = "fade"
                }
            }
            if (v.currentImage.attr("data-transition")) {
                w = v.currentImage.attr("data-transition")
            }
            v.running = true;
            if (w == "sliceDown" || w == "sliceDownRight" || w == "sliceDownLeft") {
                n(r, t, v);
                var y = 0;
                var z = 0;
                var A = a(".nivo-slice", r);
                if (w == "sliceDownLeft") {
                    A = a(".nivo-slice", r)._reverse()
                }
                A.each(function () {
                    var H = a(this);
                    H.css({
                        top: "0px"
                    });
                    if (z == t.slices - 1) {
                        setTimeout(function () {
                            H.animate({
                                height: "100%",
                                opacity: "1.0"
                            }, t.animSpeed, "", function () {
                                r.trigger("nivo:animFinished")
                            })
                        }, 100 + y)
                    } else {
                        setTimeout(function () {
                            H.animate({
                                height: "100%",
                                opacity: "1.0"
                            }, t.animSpeed)
                        }, 100 + y)
                    }
                    y += 50;
                    z++
                })
            } else {
                if (w == "sliceUp" || w == "sliceUpRight" || w == "sliceUpLeft") {
                    n(r, t, v);
                    var y = 0;
                    var z = 0;
                    var A = a(".nivo-slice", r);
                    if (w == "sliceUpLeft") {
                        A = a(".nivo-slice", r)._reverse()
                    }
                    A.each(function () {
                        var H = a(this);
                        H.css({
                            bottom: "0px"
                        });
                        if (z == t.slices - 1) {
                            setTimeout(function () {
                                H.animate({
                                    height: "100%",
                                    opacity: "1.0"
                                }, t.animSpeed, "", function () {
                                    r.trigger("nivo:animFinished")
                                })
                            }, 100 + y)
                        } else {
                            setTimeout(function () {
                                H.animate({
                                    height: "100%",
                                    opacity: "1.0"
                                }, t.animSpeed)
                            }, 100 + y)
                        }
                        y += 50;
                        z++
                    })
                } else {
                    if (w == "sliceUpDown" || w == "sliceUpDownRight" || w == "sliceUpDownLeft") {
                        n(r, t, v);
                        var y = 0;
                        var z = 0;
                        var B = 0;
                        var A = a(".nivo-slice", r);
                        if (w == "sliceUpDownLeft") {
                            A = a(".nivo-slice", r)._reverse()
                        }
                        A.each(function () {
                            var H = a(this);
                            if (z == 0) {
                                H.css("top", "0px");
                                z++
                            } else {
                                H.css("bottom", "0px");
                                z = 0
                            }
                            if (B == t.slices - 1) {
                                setTimeout(function () {
                                    H.animate({
                                        height: "100%",
                                        opacity: "1.0"
                                    }, t.animSpeed, "", function () {
                                        r.trigger("nivo:animFinished")
                                    })
                                }, 100 + y)
                            } else {
                                setTimeout(function () {
                                    H.animate({
                                        height: "100%",
                                        opacity: "1.0"
                                    }, t.animSpeed)
                                }, 100 + y)
                            }
                            y += 50;
                            B++
                        })
                    } else {
                        if (w == "fold") {
                            n(r, t, v);
                            var y = 0;
                            var z = 0;
                            a(".nivo-slice", r).each(function () {
                                var I = a(this);
                                var H = I.width();
                                I.css({
                                    top: "0px",
                                    height: "100%",
                                    width: "0px"
                                });
                                if (z == t.slices - 1) {
                                    setTimeout(function () {
                                        I.animate({
                                            width: H,
                                            opacity: "1.0"
                                        }, t.animSpeed, "", function () {
                                            r.trigger("nivo:animFinished")
                                        })
                                    }, 100 + y)
                                } else {
                                    setTimeout(function () {
                                        I.animate({
                                            width: H,
                                            opacity: "1.0"
                                        }, t.animSpeed)
                                    }, 100 + y)
                                }
                                y += 50;
                                z++
                            })
                        } else {
                            if (w == "fade") {
                                n(r, t, v);
                                var C = a(".nivo-slice:first", r);
                                C.css({
                                    height: "100%",
                                    width: r.width() + "px"
                                });
                                C.animate({
                                    opacity: "1.0"
                                }, t.animSpeed * 2, "", function () {
                                    r.trigger("nivo:animFinished")
                                })
                            } else {
                                if (w == "slideInRight") {
                                    n(r, t, v);
                                    var C = a(".nivo-slice:first", r);
                                    C.css({
                                        height: "100%",
                                        width: "0px",
                                        opacity: "1"
                                    });
                                    C.animate({
                                        width: r.width() + "px"
                                    }, t.animSpeed * 2, "", function () {
                                        r.trigger("nivo:animFinished")
                                    })
                                } else {
                                    if (w == "slideInLeft") {
                                        n(r, t, v);
                                        var C = a(".nivo-slice:first", r);
                                        C.css({
                                            height: "100%",
                                            width: "0px",
                                            opacity: "1",
                                            left: "",
                                            right: "0px"
                                        });
                                        C.animate({
                                            width: r.width() + "px"
                                        }, t.animSpeed * 2, "", function () {
                                            C.css({
                                                left: "0px",
                                                right: ""
                                            });
                                            r.trigger("nivo:animFinished")
                                        })
                                    } else {
                                        if (w == "boxRandom") {
                                            o(r, t, v);
                                            var D = t.boxCols * t.boxRows;
                                            var z = 0;
                                            var y = 0;
                                            var E = c(a(".nivo-box", r));
                                            E.each(function () {
                                                var H = a(this);
                                                if (z == D - 1) {
                                                    setTimeout(function () {
                                                        H.animate({
                                                            opacity: "1"
                                                        }, t.animSpeed, "", function () {
                                                            r.trigger("nivo:animFinished")
                                                        })
                                                    }, 100 + y)
                                                } else {
                                                    setTimeout(function () {
                                                        H.animate({
                                                            opacity: "1"
                                                        }, t.animSpeed)
                                                    }, 100 + y)
                                                }
                                                y += 20;
                                                z++
                                            })
                                        } else {
                                            if (w == "boxRain" || w == "boxRainReverse" || w == "boxRainGrow" || w == "boxRainGrowReverse") {
                                                o(r, t, v);
                                                var D = t.boxCols * t.boxRows;
                                                var z = 0;
                                                var y = 0;
                                                var F = 0;
                                                var W = 0;
                                                var X = new Array;
                                                X[F] = new Array;
                                                var E = a(".nivo-box", r);
                                                if (w == "boxRainReverse" || w == "boxRainGrowReverse") {
                                                    E = a(".nivo-box", r)._reverse()
                                                }
                                                E.each(function () {
                                                    X[F][W] = a(this);
                                                    W++;
                                                    if (W == t.boxCols) {
                                                        F++;
                                                        W = 0;
                                                        X[F] = new Array
                                                    }
                                                });
                                                for (var Y = 0; Y < t.boxCols * 2; Y++) {
                                                    var Z = Y;
                                                    for (var aa = 0; aa < t.boxRows; aa++) {
                                                        if (Z >= 0 && Z < t.boxCols) {
                                                            (function (L, N, O, I, K) {
                                                                var M = a(X[L][N]);
                                                                var J = M.width();
                                                                var H = M.height();
                                                                if (w == "boxRainGrow" || w == "boxRainGrowReverse") {
                                                                    M.width(0).height(0)
                                                                }
                                                                if (I == K - 1) {
                                                                    setTimeout(function () {
                                                                        M.animate({
                                                                            opacity: "1",
                                                                            width: J,
                                                                            height: H
                                                                        }, t.animSpeed / 1.3, "", function () {
                                                                            r.trigger("nivo:animFinished")
                                                                        })
                                                                    }, 100 + O)
                                                                } else {
                                                                    setTimeout(function () {
                                                                        M.animate({
                                                                            opacity: "1",
                                                                            width: J,
                                                                            height: H
                                                                        }, t.animSpeed / 1.3)
                                                                    }, 100 + O)
                                                                }
                                                            })(aa, Z, y, z, D);
                                                            z++
                                                        }
                                                        Z--
                                                    }
                                                    y += 100
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        };
        var c = function (t) {
            for (var u, r, s = t.length; s; u = parseInt(Math.random() * s), r = t[--s], t[s] = t[u], t[u] = r) {}
            return t
        };
        var j = function (r) {
            if (this.console && typeof console.log != "undefined") {
                console.log(r)
            }
        };
        this.stop = function () {
            if (!a(p).data("nivo:vars").stop) {
                a(p).data("nivo:vars").stop = true;
                j("Stop Slider")
            }
        };
        this.start = function () {
            if (a(p).data("nivo:vars").stop) {
                a(p).data("nivo:vars").stop = false;
                j("Start Slider")
            }
        };
        d.afterLoad.call(this);
        return this
    };
    a.fn.nivoSlider = function (c) {
        return this.each(function (e, f) {
            var g = a(this);
            if (g.data("nivoslider")) {
                return g.data("nivoslider")
            }
            var d = new b(this, c);
            g.data("nivoslider", d)
        })
    };
    a.fn.nivoSlider.defaults = {
        effect: "random",
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 3000,
        startSlide: 0,
        directionNav: true,
        directionNavHide: true,
        controlNav: true,
        controlNavThumbs: false,
        controlNavThumbsFromRel: false,
        controlNavThumbsSearch: ".jpg",
        controlNavThumbsReplace: "_thumb.jpg",
        keyboardNav: true,
        pauseOnHover: true,
        manualAdvance: false,
        captionOpacity: 0.8,
        prevText: "Prev",
        nextText: "Next",
        randomStart: false,
        beforeChange: function () {},
        afterChange: function () {},
        slideshowEnd: function () {},
        lastSlide: function () {},
        afterLoad: function () {}
    };
    a.fn._reverse = [].reverse
})(jQuery);]

Depois, vá até a sua folha de css no painel, e adicione:

Código:

.nivoSlider {
    position: relative;
}

.nivoSlider img {
    position: absolute;
    top: 0;
    left: 0;
}

.nivoSlider a.nivo-imageLink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 6;
    display: none;
}

.nivo-slice {
    display: block;
    position: absolute;
    z-index: 5;
    height: 100%;
}

.nivo-box {
    display: block;
    position: absolute;
    z-index: 5;
}

.nivo-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
    color: #fff;
    opacity: .8;
    width: 100%;
    z-index: 8;
}

.nivo-caption p {
    padding: 5px;
    margin: 0;
}

.nivo-caption a {
    display: inline!important;
}

.nivo-html-caption {
    display: none;
}

.nivo-directionNav a {
    position: absolute;
    top: 45%;
    z-index: 9;
    cursor: pointer;
}

.nivo-prevNav {
    left: 0;
}

.nivo-nextNav {
    right: 0;
}

.nivo-controlNav a {
    position: relative;
    z-index: 9;
    cursor: pointer;
}

.nivo-controlNav a.active {
    font-weight: bold;
}

.theme-default .nivoSlider {
    position: relative;
    background: #fff url(http://i46.servimg.com/u/f46/15/66/68/20/loadin10.gif) no-repeat 50% 50%;
    margin-bottom: 50px;
    -webkit-box-shadow: 0 1px 5px 0 #4a4a4a;
    -moz-box-shadow: 0 1px 5px 0 #4a4a4a;
    box-shadow: 0 1px 5px 0 #4a4a4a;
}

.theme-default .nivoSlider img {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.theme-default .nivoSlider a {
    border: 0;
    display: block;
}

.theme-default .nivo-controlNav {
    position: absolute;
    left: 50%;
    bottom: -42px;
    margin-left: -40px;
}

.theme-default .nivo-controlNav a {
    display: block;
    width: 22px;
    height: 22px;
    background: url(http://i46.servimg.com/u/f46/15/66/68/20/bullet10.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    margin-right: 3px;
    float: left;
}

.theme-default .nivo-controlNav a.active {
    background-position: 0 -22px;
}

.theme-default .nivo-directionNav a {
    display: block;
    width: 30px;
    height: 30px;
    background: url(http://i46.servimg.com/u/f46/15/66/68/20/arrows10.png) no-repeat;
    text-indent: -9999px;
    border: 0;
}

.theme-default a.nivo-nextNav {
    background-position: -30px 0;
    right: 15px;
}

.theme-default a.nivo-prevNav {
    left: 15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica,Arial,sans-serif;
}

.theme-default .nivo-caption a {
    color: #fff;
    border-bottom: 1px dotted #fff;
}

.theme-default .nivo-caption a:hover {
    color: #fff;
}

E pra finalizar, no painel ainda. Vá até Painel de Controle Visualização Página inicial Geral
em "Mensagem da página inicial" adicione em "Conteúdo da mensagem"

Código:

<div style="width:700px;margin:40px auto;">
   <div class="slider-wrapper theme-default">
      <div class="ribbon">
      </div>
      <div id="nivoslider-125" class="nivoSlider" style="width:700px;height:300px;">
                        <img src="http://vipmotorsports.com/wp-content/uploads/2012/06/slide04-700x300.jpg" title="#nivoslider-125-caption-0" alt="" height="300px" width="700px" />
 
                        <img src="http://www.oriongames.com.br/wp-content/uploads/2012/08/Guild-Wars-2-700x300.jpg" title="#nivoslider-125-caption-1" alt="" height="300px" width="700px"/>

                        <img src="http://www.oriongames.com.br/wp-content/uploads/2012/08/Darksiders-II-700x300.jpg" title="#nivoslider-125-caption-2" alt="" height="300px" width="700px"/>
      </div>
   </div>
   <div id="nivoslider-125-caption-0" class="nivo-html-caption">
      Texto 1...
   </div>
   <div id="nivoslider-125-caption-1" class="nivo-html-caption">
      Texto 2 ...
   </div>
   <div id="nivoslider-125-caption-2" class="nivo-html-caption">
      Texto 3 ...
   </div>
   <p>
      <script type="text/javascript">jQuery(window).load(function(){jQuery("#nivoslider-125").nivoSlider({effect:"random",slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:true,keyboardNav:true,pauseOnHover:true,manualAdvance:false});});</script>
   </div>

Esta parte acima será onde você vai adicionar imagens e links para o seu slide.
Até mais!

[bruno.alexandre.98]

Obrigado pela ajuda mas so n sei onde vou meter as imagens , se me pudessem mandar ja o link com as imagens que quero agradecia : imagem 1: https://i.servimg.com/u/f58/18/78/22/75/10253210.jpg , link : http://lbncomunidade.forumeiros.com.pt/t29-liga-bpl-resultados , imagem 2 : https://i.servimg.com/u/f58/18/78/22/75/96801210.jpg , link : http://lbncomunidade.forumeiros.com.pt/t33-fifa-world-cup-grupos-e-resultados , imagem 3 : https://i.servimg.com/u/f58/18/78/22/75/99180510.jpg , link : https://www.facebook.com/groups/lbncomunidadefifa/

[Ian Caio Batista]

Olá, fiquei interessado em fazer esse efeito em meu fórum também, fiz tudo direitinho mais o resultado não sai certo! Caso acessem o meu novo fórum verão que os Slides não saíram:
http://narutchikararpg.forumeiros.com/
O que pode ter dado errado?

Ian.

[Daemon]

Troque a última parte que mandei para o senhor, por esta daqui:

Código:

<div style="width:700px;margin:40px auto;">
   <div class="slider-wrapper theme-default">
      <div class="ribbon">
      </div>
      <div id="nivoslider-125" class="nivoSlider" style="width:700px;height:300px;">
               <a href="/t29-liga-bpl-resultados" target="_blank"><img src="http://i58.servimg.com/u/f58/18/78/22/75/10253210.jpg" title="#nivoslider-125-caption-0" alt="" height="300px" width="700px" /></a>
 
               <a href="/t33-fifa-world-cup-grupos-e-resultados" target="_blank"><img src="http://i58.servimg.com/u/f58/18/78/22/75/96801210.jpg" title="#nivoslider-125-caption-1" alt="" height="300px" width="700px"/></a>

               <a href="https://www.facebook.com/groups/lbncomunidadefifa/" target="_blank"><img src="http://i58.servimg.com/u/f58/18/78/22/75/99180510.jpg" title="#nivoslider-125-caption-2" alt="" height="300px" width="700px"/></a>
      </div>
   </div>
   <div id="nivoslider-125-caption-0" class="nivo-html-caption">
      Liga BLP resultados!
   </div>
   <div id="nivoslider-125-caption-1" class="nivo-html-caption">
      Fifa, grupos e resultados!
   </div>
   <div id="nivoslider-125-caption-2" class="nivo-html-caption">
      Nós na comunidade!
   </div>
   <p>
      <script type="text/javascript">jQuery(window).load(function(){jQuery("#nivoslider-125").nivoSlider({effect:"random",slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:true,keyboardNav:true,pauseOnHover:true,manualAdvance:false});});</script>
   </div>

!

[bruno.alexandre.98]

Ja fiz tudo isso , mas fica tudo direitinho mas as imagens nao aparecem amigo , fica em branco e uma rodinha no meio a andar e nao aparece nada ... o que faço ?

Pode ver : http://lbncomunidade.forumeiros.com.pt/forum

[bruno.alexandre.98]

ALGUEM PARA ME AJUDAR !ESTOU A ESPERA A MAIS DE 24 HORAS

[waghcwb]

Olá, existe uma infinidade de formas de ser feito isso.. Eu posso desenvolver um código bem simples aqui.. Mas vou te apresentar um plugin que facilitara as coisas para você (vou passar o plugin ja pronto e não um que eu tenha feito, pois o plugin ja vem configurado e com várias opções, e ja foi pensado em tudo que é necessário, e resolvido os bugs encontrados.. E se eu fosse fazer um teriamos que fazer esse processo todo novamente...)
Como você não não especificou exatamente onde quer esse efeito, te recomendo colocar isso aqui na mensagem da homepage:

Código:

<style type="text/css">
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
</style>
<div class="banner">
   
    <ul>
       
        <li>
            <a href="#">Primeiro slide</a>
        </li>
       
        <li>
            <a href="#">Segundo slide</a>
        </li>
       
        <li>
            <a href="#">Último slide</a>
        </li>
       
    </ul>
</div>
<script src="//unslider.com/unslider.min.js"></script>
<script>
jQuery(function(){
    jQuery('.banner').unslider();
});
</script>

Note a parte que está inserida dentro da nossa UL

Código:

    <ul>
       
        <li>
            <a href="#">Primeiro slide</a>
        </li>
       
        <li>
            <a href="#">Segundo slide</a>
        </li>
       
        <li>
            <a href="#">Último slide</a>
        </li>
       
    </ul>

Para inserir mais slides basta inserir mais LI's, assim:

Código:

<li>
            <a href="#">Slide</a>
        </li>

Caso queira adicionar imagens nos slides use esse código:

Código:

<img src="LINK DA IMAGEM" alt="Slider">

Caso queira que os links abram em uma nova página use o atributo "target blank", assim:

Código:

<a href="#" target="_blank">Texto</a>

Nos links mude os "#" para o link desejado..

O slider não esta estilizado, esta "zerado" na verdade, para que você possa estilizar a seu gosto

Aqui está o link do slider para que você possa ver mais funcionalidades do mesmo e se não me engano se você baixar o arquivo para seu computador eles fornecem um tema básico para o slider...
http://unslider.com

Qualquer dúvida que tenha avisa ai

E caso queira estilizar o slider, e não souber como fazer, podemos fazer isso juntos aqui...

[bruno.alexandre.98]

se me pudessem mandar ja o link com as imagens que quero agradecia : imagem 1: https://i.servimg.com/u/f58/18/78/22/75/10253210.jpg , link : http://lbncomunidade.forumeiros.com.pt/t29-liga-bpl-resultados , imagem 2 : https://i.servimg.com/u/f58/18/78/22/75/96801210.jpg , link : http://lbncomunidade.forumeiros.com.pt/t33-fifa-world-cup-grupos-e-resultados , imagem 3 : https://i.servimg.com/u/f58/18/78/22/75/99180510.jpg , link : https://www.facebook.com/groups/lbncomunidadefifa/

[Daemon]

O senhor ativou o javascript em seu fórum? Lembre-se que deve seguir todos os passos que passei ao senhor e ativar o javascript em seu fórum.

[waghcwb]

Aqui o código com suas imagens e links...

Código:

<style type="text/css">
.banner{position:relative;overflow:auto;text-align:center;}
.banner li{list-style:none;}
.banner ul li{float:left;}
.banner ul{margin:0;padding:0;}
.banner img{max-height:215px;}
</style>
<div class="banner">
 <ul>
 
<li>
 <a target="_blank" href="http://lbncomunidade.forumeiros.com.pt/t29-liga-bpl-resultados"><img src="http://i58.servimg.com/u/f58/18/78/22/75/10253210.jpg"></a>
 </li>
 
<li>
 <a target="_blank" href="http://lbncomunidade.forumeiros.com.pt/t33-fifa-world-cup-grupos-e-resultados"><img src="http://i58.servimg.com/u/f58/18/78/22/75/96801210.jpg"></a>
 </li>
 
<li>
 <a target="_blank" href="https://www.facebook.com/groups/lbncomunidadefifa"><img src="http://i58.servimg.com/u/f58/18/78/22/75/99180510.jpg"></a>
 </li>
 </ul>
</div>
<script src="//unslider.com/unslider.min.js"></script>
<script>
jQuery(function(){
 jQuery('.banner').unslider();
});
</script>