nivo slider

hi



i am new to cs cart and i want to place this nivo slider in my home page.

do any member can help me out to archive it…





[url]http://nivo.dev7studios.com/[/url]

Webgraphiq has an addon for $45 that offers similar functionality. This uses a newer version of jquery than the one cscart uses so this could be an issue.

[quote name=‘whiplash13’]Webgraphiq has an addon for $45 that offers similar functionality. This uses a newer version of jquery than the one cscart uses so this could be an issue.[/QUOTE]







thanks for suggesting me a add-on but i have all ready crossed half sea but struck with some errors and just want to know the way how others are doing so that i can finish it

[quote name=‘ravt’]Hi

i am new for cs cart. I am intrested to add this nivo slider into my cart, is there any member can help me out by explaining it clearly how to place this in home page.



[URL]http://nivo.dev7studios.com/[/URL]



steps i followed

1)

{script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"}
{script src="js/jquery.nivo.slider.pack.js"}



i added this in scripts.tpl bellow

{script src="js/ajax.js"}



2) later i added

in style.tpl

bellow

3) finally i have created a html block and placed it at center of homepage and filled the HTML code

```php

```

is my steps are right? i know its not right bcz i didnt get the proper output

since i am new for it. really need a guidence for it.
its going to be really helpful for me if some one explains it out.

thank you[/QUOTE]



[COLOR="Sienna"]where should i place this just left in a sea[/COLOR]

Wow … trying to use JQuery 1.4 when CS-Cart is already using JQuery 1.3 is going to fail. That’s why sliders and other cool things are missing in CS-Cart.



If you can make it work in JQuery 1.3 or find one that does work in jQuery 1.3 you’re in luck. I’ve built a couple and they’re pretty easy; Personally, I mod the banner manager so I don’t have to hand code the slides.

So this slide wont work with cs-cart?



any other suggestions

You just need a version that will work with jQuery 1.3.

Put JQuery load function

below your HTML code

[QUOTE]

[/QUOTE]

I think it should be No problem to use nivo slider with CS-cart. I used s3Slider and jQuery Cycle with CS-cart for my sites.

[quote name=‘MINISTAR4U’]Put JQuery load function

below your HTML code





I think it should be No problem to use nivo slider with CS-cart. I used s3Slider and jQuery Cycle with CS-cart for my sites.[/QUOTE]





thanks ministar



i have placed that part of code bellow the HTML but it never brought any change to my page.













and here is a sample site which uses this same slide

[url]http://sitemasterly.com/ismart/index.php[/url]

Thanks, I wasn’t sure if the slider was JQuery 1.3 compatible.

ravt, have you made the design from? [url]http://sitemasterly.com/[/url]

Look like sitemasterly.com use some custom nivo Addon…lol



I saw you still use nivo sample null images, images/slide1.jpg ~ slide4.jpg. you didn’t upload your slide show images to the image folder on your server. Since I don’t have your site link, I can’t exectly tell where is your image folder? For test purpose, please use nivo sample images.

[url]http://nivo.dev7studios.com/images/up.jpg[/url]

[url]http://nivo.dev7studios.com/images/monstersinc.jpg[/url]

[url]http://nivo.dev7studios.com/images/nemo.jpg[/url]

[url]http://nivo.dev7studios.com/images/walle.jpg[/url]

to replace images/slide1.jpg ~ slide4.jpg…

If you don’t list

{script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”},

it still work, but it won’t show the botton nivo page nagivation control…

please copy

[QUOTE]

/============================/

/=== Custom Slider Styles ===/

/============================/

#slider {

…

.nivo-caption a {

text-decoration:underline;

}[/QUOTE]

on the [url]http://nivo.dev7studios.com/style.css[/url] and append it inside the nivo-slider.css file. It controls the layout of Nivo slideshow.

[quote name=‘Triplex’]ravt, have you made the design from? [url]http://sitemasterly.com/[/url][/QUOTE]



no i am just trying to learn things. Just have some enthuse towards coding so trying to figure out things on my own

[quote name=‘MINISTAR4U’]Look like sitemasterly.com use some custom nivo Addon…lol



I saw you still use nivo sample null images, images/slide1.jpg ~ slide4.jpg. you didn’t upload your slide show images to the image folder on your server. Since I don’t have your site link, I can’t exectly tell where is your image folder? For test purpose, please use nivo sample images.

[url]http://nivo.dev7studios.com/images/up.jpg[/url]

[url]http://nivo.dev7studios.com/images/monstersinc.jpg[/url]

[url]http://nivo.dev7studios.com/images/nemo.jpg[/url]

[url]http://nivo.dev7studios.com/images/walle.jpg[/url]

to replace images/slide1.jpg ~ slide4.jpg…[/QUOTE]



thanks ministar

at last i found some change in my output after a long time









(this is a test site)



i hope jquery is not getting into action ?

is it so

[quote name=‘MINISTAR4U’]If you don’t list

{script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”},

it still work, but it won’t show the botton nivo page nagivation control…[/QUOTE]



thank you again MINISTAR



I have mentioned before that i have placed

{script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”}

{script src=“js/jquery.nivo.slider.pack.js”}



below

{script src=“js/ajax.js”}

in scripts.tpl



i have removed

{script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”}



but the same output





is that this adding

{script src=“js/jquery.nivo.slider.pack.js”}

in styles.tpl is a right method

bcz i have done this by reading some blog so not sure of this



bcz the output comes without any jquery touch on it ( just a thought but not sure)

if you need Bottom page nagivation panel, please include

{script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”}

as before.



The reason for slides listed like above is that there are some custom style code

on the [url]http://nivo.dev7studios.com/style.css[/url] which need to append to the nivo-slider.css file.

After that, your Nivo slideshow will run like the nivo slider’s sample.

[QUOTE]

/============================/

/=== Custom Slider Styles ===/

/============================/

#slider {

position:relative;

min-height:220px;

margin:30px 30px 60px 30px;

background:#202834 url(images/loading.gif) no-repeat 50% 50%;

-moz-box-shadow:0px 0px 10px #333;

-webkit-box-shadow:0px 0px 10px #333;

box-shadow:0px 0px 10px #333;

}

#slider img {

position:absolute;

top:0px;

left:0px;

display:none;

}

#slider a {

border:0;

display:block;

}



.nivo-controlNav {

position:absolute;

left:47%;

bottom:-30px;

}

.nivo-controlNav a {

display:block;

width:10px;

height:10px;

background:url(images/bullets.png) no-repeat;

text-indent:-9999px;

border:0;

margin-right:3px;

float:left;

}

.nivo-controlNav a.active {

background-position:-10px 0;

}



.nivo-directionNav a {

display:block;

width:30px;

height:30px;

background:url(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 a {

text-decoration:underline;

}[/QUOTE]

thanks for suggesting the css additional code.



i have done it



I got a smooth background in my home screen. But the image disappeared.



can any one suggest a solution for this

this is the output



the code which i pasted in my HTML block is this

Please try this simple Nivo Loader first

[QUOTE][/QUOTE]

MINISTAR4U - I am trying to add nivo slider which shouldn’t be too difficult you would have thought but can’t seem to make it work. I have added the .js file reference in the script.tpl and the style sheet ref in the styles.tpl, uploaded the files etc but when you look at the page source from the front end there are not there listed with the other js or .css files. should they be “declared” somewhere else?



any tips appreciated,



Many Thanks