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.

news slider

View previous topic View next topic Go down

In progress news slider

Post by shawn.m on 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
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

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

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

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 on July 2nd 2011, 4:34 pm

yeah ok i like the look of that one Smile

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. on 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.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: news slider

Post by OMGitsDMC on 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
Forumember

Male Posts : 166
Reputation : 0
Language : english

Back to top Go down

In progress Re: news slider

Post by Nera. on 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.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: news slider

Post by Mike on 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
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

In progress Re: news slider

Post by Nera. on 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.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: news slider

Post by Mike on 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
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

In progress Re: news slider

Post by shawn.m on 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
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. on 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.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: news slider

Post by shawn.m on 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
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. on 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.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: news slider

Post by shawn.m on 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
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

Post by Nera. on 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.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: news slider

Post by shawn.m on 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
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

In progress Re: news slider

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

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

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: news slider

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

were can i find them ?

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. on July 3rd 2011, 4:51 pm

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

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: news slider

Post by shawn.m on 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
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 on July 4th 2011, 9:04 am

bump

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 on 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
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

In progress Re: news slider

Post by shawn.m on 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
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.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