The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

news slider

5 posters

Go down

In progress news slider

Post by shawn.m July 2nd 2011, 4:16 pm

please help me could some one set me up with a news slide show like the one on this website http://uk.ign.com/ i have no idea about this kind of stuff so if someone set it up for me i would be so greatfull thanks
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nomee July 2nd 2011, 4:22 pm

Hmm, ok
We can make it like a slider?
http://nivo.dev7studios.com/
Nomee
Nomee
Forumember

Male Posts : 384
Reputation : 80
Language : Urdu,English
Location : Pakistan

http://www.businessfellows.biz

Back to top Go down

In progress Re: news slider

Post by shawn.m July 2nd 2011, 4:34 pm

yeah ok i like the look of that one Smile
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. July 2nd 2011, 6:41 pm

Hi,
For that one.

Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page

Code:
<html>
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
    background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
    width:600px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:-45px;
}
#slider {
    position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
    background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}</style>
</head>
<body>
    <div id="wrapper">

        <div id="slider-wrapper">
       
            <div id="slider" class="nivoSlider">
                <img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
                <img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
       
        </div>

    </div>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</body>
</html>

Change the pictures links.

Add this to your homepage and insert he adres of your HTML page in it.

Code:
<center><iframe src="ADRESS TO YOUR HTML PAGE GOES HERE" width="100%" height="300"></iframe></center>
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: news slider

Post by OMGitsDMC July 2nd 2011, 11:31 pm

Nera. wrote:Hi,
For that one.

Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page

Code:
<html>
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
    background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
    width:600px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:-45px;
}
#slider {
    position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
    background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}</style>
</head>
<body>
    <div id="wrapper">

        <div id="slider-wrapper">
       
            <div id="slider" class="nivoSlider">
                <img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
                <img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
       
        </div>

    </div>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</body>
</html>

Change the pictures links.

Add this to your homepage and insert he adres of your HTML page in it.

Code:
<center><iframe src="ADRESS TO YOUR HTML PAGE GOES HERE" width="100%" height="300"></iframe></center>
where is the hompage i add the last code?
OMGitsDMC
OMGitsDMC
Forumember

Male Posts : 166
Reputation : 0
Language : english

Back to top Go down

In progress Re: news slider

Post by Nera. July 3rd 2011, 12:13 am

Admin panel >> Display >> Generalities >> Homepage Message
Add the adress in the code. Make sure that the script in HTML on the bottom stays the same.
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: news slider

Post by Mike July 3rd 2011, 12:32 am

That code is going to add a bunch of uneeded stuff since it has the </body> and stuff... which means that it wont make your forum show.
Mike
Mike
Hyperactive

Male Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado

Back to top Go down

In progress Re: news slider

Post by Nera. July 3rd 2011, 12:35 am

Here Drogba -link removed


Last edited by Nera. on July 3rd 2011, 12:45 am; edited 1 time in total (Reason for editing : -link removed)
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: news slider

Post by Mike July 3rd 2011, 12:43 am

Weird it did work. Nevermind then, but I think it would still be easier to remove everything but the raw code
Mike
Mike
Hyperactive

Male Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado

Back to top Go down

In progress Re: news slider

Post by shawn.m July 3rd 2011, 10:11 am

Nera. wrote:Hi,
For that one.

Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page

Code:
<html>
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
    background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
    width:600px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:-45px;
}
#slider {
    position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
    background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}</style>
</head>
<body>
    <div id="wrapper">

        <div id="slider-wrapper">
       
            <div id="slider" class="nivoSlider">
                <img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
                <img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
       
        </div>

    </div>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</body>
</html>

Change the pictures links.

Add this to your homepage and insert he adres of your HTML page in it.

Code:
<center><iframe src="ADRESS TO YOUR HTML PAGE GOES HERE" width="100%" height="300"></iframe></center>


Hi i did everything you said and it dont work ;/
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. July 3rd 2011, 3:31 pm

Nera. wrote: Make sure that the script in HTML on the bottom stays the same.
This also?


Last edited by Nera. on July 3rd 2011, 3:49 pm; edited 1 time in total (Reason for editing : -link removed)
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: news slider

Post by shawn.m July 3rd 2011, 3:49 pm

it is
Code:
<html>
<head>
    <title>Nivo Slider</title>
    <link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
    background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
    width:600px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:-45px;
}
#slider {
    position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
    background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}</style>
</head>
<body>
    <div id="wrapper">

        <div id="slider-wrapper">
     
            <div id="slider" class="nivoSlider">
                <img src="http://www.carpictures.com/media/images/640/11FSE000531947AA.jpeg" alt="" />
                <a href="http://dev7studios.com"><img src="http://www.carpictures.com/media/images/full/11FTA125124891AA.jpeg" alt="" title="This is an example of a caption" /></a>
                <img src="http://www.modifiedcars.com/pix/cars_large/38284_242617.jpg" alt="" />
                <img src="http://www.modifiedcars.com/pix/cars_large/36397_242023.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
     
        </div>

    </div>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</body>
</html>
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. July 3rd 2011, 4:21 pm

All that have sent me PM's have the same change in the script.
Make sure this stays the same. It gets deformed sometimes after saving it, than it wont work. As it did for you Shawn.
Code:
    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: news slider

Post by shawn.m July 3rd 2011, 4:32 pm

yeah and i have done everything now, And it still does not work! Is there not a diffarnt slide i can use like ign.com or fastcar.co.uk ??
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. July 3rd 2011, 4:38 pm

Shawn can you explain your problem a bit http://modifiedrides.7forum.info/
As I see it works, though you need to customize it bit to fit. I'll check it latter.
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: news slider

Post by shawn.m July 3rd 2011, 4:41 pm

yeah my problem is that there are scroll bars around it and that it's a iframe wich it the easy way, I wanted a real slide show, Confused
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. July 3rd 2011, 4:41 pm

Find the one you want and will install it, OK?
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: news slider

Post by shawn.m July 3rd 2011, 4:47 pm

were can i find them ?
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. July 3rd 2011, 4:51 pm

There are bunch online. Just google a bit and find the one you like/want Wink
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

In progress Re: news slider

Post by shawn.m July 3rd 2011, 4:55 pm

I do want this one but change the blue to red http://www.fastcar.co.uk/ and put my own logo on Smile
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by shawn.m July 4th 2011, 9:04 am

bump
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Mike July 4th 2011, 4:32 pm

http://htmldrive.net/categorys/show/2/Slideshow-Scroller

I can't really help you set it up since that isn't really a Forumotion support issue. They have clear instructions on each, you just need to have patience to install it.
Mike
Mike
Hyperactive

Male Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado

Back to top Go down

In progress Re: news slider

Post by shawn.m July 4th 2011, 5:58 pm

Hi i have no idea on how to do this, is there know one on here that can build slide shows ? there must be someone ?
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

Back to top

- Similar topics

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