Coding-Spot

You are not connected. Please login or register

 
 

how to add Nivo Slide in banner/poster homepage?

Message (Page 1 of 1)


 
Senior Member

Posted on Thu May 30, 2013 1:52 pm

 
Hello all, i want to ask :)

how to add Nivo Slide in banner/poster homepage?
before i use nivo slider on my forum, and i add in general message homepage :)


but i need use my slide and add or change in my banner/poster homepage,
so like this :)


how to be like that?

my forum:
http://budokai.indonesianforum.net/

this my code for nivo slider:
Code:
<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:500px;height:98px;"><img src="http://i.imgur.com/J4XsswW.jpg" alt="" /><img src="http://i.imgur.com/vstN12I.jpg" title="#nivoslider-125-caption-0" alt="" /><img src="http://i.imgur.com/p9OMH9g.jpg" alt="" /></div>
        </div><div id="nivoslider-125-caption-0" class="nivo-html-caption">You can add captions too…</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>


please help me, thanks before ^_^



View user profile



 
CS Staff
CS Staff

Posted on Thu May 30, 2013 3:03 pm

 
Hi,

Try this code:
Code:
.nivoSlider {
width: 500px;
height: 98px;
background-image: url(http://i.imgur.com/p9OMH9g.jpg);
top: -455px;
right: -401px;
background-position: initial initial;
background-repeat: no-repeat no-repeat;
}



View user profile



 
Senior Member

Posted on Thu May 30, 2013 4:12 pm

 
hi sir.chivas :)

thanks for help me, i done try, but result like this :(

http://budokai.indonesianforum.net/

position not fix :)

and in my general message,
there is an empty place, I do not want it. :)

how to fix it?

please help me , thanks before ^_^



View user profile



 
Administrator
Administrator

Posted on Thu May 30, 2013 10:48 pm

 
Just use the code in our tutorial.
Here: http://coding-spot.darkbb.com/t9-nivo-slider-in-your-forum

Happy



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri May 31, 2013 3:40 am

 
yes, before i done try with your code mr.mark, but small avatar in my homepage (latest topic) get lost ._.



View user profile



 
Administrator
Administrator

Posted on Fri May 31, 2013 3:42 am

 
Remove this one on the script then check it:
Code:
<script type="text/javascript" src="http://static.tumblr.com/hhedat8/gYrmksxtn/jquery-1.9.0.min.js"></script>



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri May 31, 2013 4:46 am

 
yes, its work mr.mark..
now im use your code for nivo ^_^
-----------

but for this topic, i need change position nive slider to my banner/poster
like this


source:
http://cportada.forum.st/

how to be like that mr.mark :D

please help me, thanks before ^_^



View user profile



 
Administrator
Administrator

Posted on Fri May 31, 2013 5:01 am

 
Add this to your CSS:
Code:
#wrapper {
position: absolute;
top: 25px;
left: 25px;
}

Just play with the value of the top and the left. Laugh



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri May 31, 2013 5:19 am

 
hello mr.mark that code its work ^_^ i like it xD

but can i change all size for nivo slider
to
width: 500
height: 87

like this


coz before im serach for size, not found :)

please help me mr.mark, thanks before ^_^



View user profile



 
Administrator
Administrator

Posted on Fri May 31, 2013 8:03 am

 
Just add width and height on the image tag. Smile



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri May 31, 2013 9:18 am

 
yes i done try mr.mark, but doesnt work, image so long and so blur. not resize


and i try in w3school, my code work, but doesnt work in mu slide
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_test

Code:
<img src="http://i.imgur.com/MrFOWCt.png" title="This displays the caption 1" alt="" height="87" width="500"/>
<img src="http://i.imgur.com/J4XsswW.jpg" title="This displays the caption 1" alt="" height="87" width="500"/>
<img src="http://i.imgur.com/p9OMH9g.jpg" title="This displays the caption 1" alt="" height="87" width="500"/>
<img src="http://i.imgur.com/p9OMH9g.jpg" title="This displays the caption 1" alt="" height="87" width="500"/>

whats wrong mr.mark? :)

http://budokai.indonesianforum.net/
please help me, thanks before ^^



View user profile



 
Administrator
Administrator

Posted on Fri May 31, 2013 9:35 am

 
Add this to your CSS:
Code:

#wrapper img {
width: 500px !important;
height: 87px !important;
}



Last edited by Mark on Fri May 31, 2013 12:29 pm; edited 1 time in total



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri May 31, 2013 11:53 am

 
size for widget not change mr.mark
you can see this:


i need change size for widget
width: 500px
height: 87px

how to fix it mr.mark :)

thanks :D



View user profile



 
Administrator
Administrator

Posted on Fri May 31, 2013 12:34 pm

 
Zzz ._. Mellow
I thought you told me that you want to change the image size, i misunderstood it.

Btw, add this to your CSS:
Code:
.nivoSlider {
width: 800px !important;
height: 87px !important;
}



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri May 31, 2013 2:13 pm

 
ok mr.mark ^_^

thanks problem solved :D

thanks before xD



View user profile



 
Administrator
Administrator

Posted on Fri May 31, 2013 2:46 pm

 
Since the problem is now solved i will locked this and move to archive section. ~Locked and Moved Happy



View user profile http://coding-spot.darkbb.com


#17

Sponsored content


 

Posted Today at 11:50 am

 





Message (Page 1 of 1)

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

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None