Download: 3D jQuery Featured Articles Slider

[Enkidu]

it will resize itself to the size of the biggest image. So if you have an image of, say, 1024x1024 and the others are like 24x24 then the size of it will be 1024x1024. that's why you need to have them all of the same size

that said. In theme orman (file orman.css) find:

.theme-orman.slider-wrapper {

	background: url("slider.png") no-repeat scroll 0 0 transparent;

	height: 337px;

	margin: 0 auto;

	padding-top: 18px;

	position: relative;

	width: 722px;

}

change the width and height to your liking but it won't have any effect due to the above :wink:

[KevinMc]

I guess I'm kind of confused. I'm using the demo images and they are all 618 x 246 pixels.

This class:

.theme-orman.slider-wrapper {

        background: url("slider.png") no-repeat scroll 0 0 transparent;

        height: 337px;

        margin: 0 auto;

        padding-top: 18px;

        position: relative;

        width: 722px;

}

...has dimensions for 722 x 337.

That's a difference of 104 pixels wider and 91 pixels taller than the actual images. What do I need to change that class to if all of my images are going to be 500 x 250 pixels?

[Enkidu]

I guess I'm kind of confused. I'm using the demo images and they are all 618 x 246 pixels.

This class:

.theme-orman.slider-wrapper {

		background: url("slider.png") no-repeat scroll 0 0 transparent;

		height: 337px;

		margin: 0 auto;

		padding-top: 18px;

		position: relative;

		width: 722px;

}

...has dimensions for 722 x 337.

That's a difference of 104 pixels wider and 91 pixels taller than the actual images. What do I need to change that class to if all of my images are going to be 500 x 250 pixels?

it's slightly bigger because you need to give some space for the frame around the images and to some padding/margin cosmetics

don't change anything with the new images. Just give it a try. then if the frame (slider.png inside uploadccs_filesassetsthemesorman) is bigger, resize it with your favourite image editor and set its new dimension there.

[KevinMc]

So, you're saying that I need to change this:

.theme-orman.slider-wrapper {

        background: url("slider.png") no-repeat scroll 0 0 transparent;

        height: 337px;

        margin: 0 auto;

        padding-top: 18px;

        position: relative;

        width: 722px;

}

...to this?

.theme-orman.slider-wrapper {

        background: url("slider.png") no-repeat scroll 0 0 transparent;

        height: 250px;

        margin: 0 auto;

        padding-top: 18px;

        position: relative;

        width: 500px;

}

If I'm completely out in left field, let me know. If this is correct, I just don't get it. LOL

[Enkidu]

So, you're saying that I need to change this:

.theme-orman.slider-wrapper {

		background: url("slider.png") no-repeat scroll 0 0 transparent;

		height: 337px;

		margin: 0 auto;

		padding-top: 18px;

		position: relative;

		width: 722px;

}

...to this?

.theme-orman.slider-wrapper {

		background: url("slider.png") no-repeat scroll 0 0 transparent;

		height: 250px;

		margin: 0 auto;

		padding-top: 18px;

		position: relative;

		width: 500px;

}

If I'm completely out in left field, let me know. If this is correct, I just don't get it. LOL

don't be afraid to experiment. How do you think we learnt? Install firebug on your firefox and go experiment. Change these value on the fly and see what works for you.

I'd say increase it a little if you want to see that white frame, otherwise, you're OK.

[KevinMc]

don't be afraid to experiment. How do you think we learnt? Install firebug on your firefox and go experiment. Change these value on the fly and see what works for you.

I'd say increase it a little if you want to see that white frame, otherwise, you're OK.

Oh, I'm not at all afraid to experiment. I've been using Firebug for quite some time now. I was just hoping there was an easier way to do adjust this sort of thing. I got it figured out so if you want to go ahead and take a look, let me know what you think. Thanks again!

[Enkidu]

How do you propose to make it easier?

oh and it looks OK but I don't see any changes in size.

[KevinMc]

How do you propose to make it easier?

Maybe two or three pre-defined image dimensions in the ACP for people to choose from.

oh and it looks OK but I don't see any changes in size.

Now try, I was making some horizontal adjustments.

[Enkidu]

I'm planing to do that on the next version which is coming soon.

Now i can see smaller images but the frame size is the same. I guess you need to edit the frame image somehow.

[KevinMc]

I'm planing to do that on the next version which is coming soon.

That will definitely be nice. I can't wait to see that.

Now i can see smaller images but the frame size is the same. I guess you need to edit the frame image somehow.

That is indeed what this is dependent upon...the actual frame image. There's no amount of CSS that's going to change the dimensions of that image. I might edit the frame image a little later on, or even create my own image. Thanks for all the help, Enkidu!

[Mister Blonde]

Have you ever tried doing this for, your other slider, for something like IPDownload and enabling multiple featured downloads?

[Enkidu]

I don't have IP.D

but I'm doing a bigger project now that will mimic the functionality of XenForo notices system. So in theory you could create your own slider anywhere :)

[Ben1]

you might wanna delete the line

@import url("{parse block="ipcontent_files"}/assets/style.css");

if it started to distort your page appearance.

This fixed my problem thanks very much,

[DoG Ny Stone HD]

I just started using IP Content and don't have a lot of expertise.

Could you clarify where I am supposed to put the code in step 3 and 4? I am using the IPB wrapper. I would like to put the slider on the default index page that comes with IP Content and have it display only on the frontpage. Or do I need to create a band new page? Sorry, I'm not sure exactly what to edit.

[KevinMc]

I would like to put the slider on the default index page that comes with IP Content and have it display only on the frontpage. Or do I need to create a band new page? Sorry, I'm not sure exactly what to edit.

Well, for my setup I have not added anything to the index.html page.

I have, however, added "{parse block="Enkidu3DImageSlider"}" to my frontpage template. There are many different ways you can set this up, which is why it's so nice. As you can see, I just parse that block wherever i want it to appear.

I did this because I didn't want it appearing on every single page. If you add it to the index.html page, I believe that's going to make it appear on every single page inside content.

[Tariq Hashim]

Hi Enkidu
Thanks for the awesome help, this is the closest i have been to the nivo slider in my site :)
but my problem is I want to embedded in the shout box announcement area in Template>skin_shoutbox>Anouncement

<div class="slider-wrapper theme-pascal">

<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<img src="http://www.sudanese.net/images/up.jpg" alt="put your image1 title" title="put your image1 title" rel="#htmlCaption_1"/>

<img src="http://www.sudanese.net/images/toystory.jpg" alt="put your image1 title" title="put your image2 title" rel="#htmlCaption_2"/>

<img src="http://www.sudanese.net/images/walle.jpg" alt="put your image1 title" title="put your image3 title" rel="#htmlCaption_3"/>

<img src="http://www.sudanese.net/images/nemo.jpg" alt="put your image1 title" title="put your image4 title" rel="#htmlCaption_4"/>

</div>

<div id="htmlCaption_1" class="nivo-html-caption">

<a href="#">put your image1 title</a>.

</div>

<div id="htmlCaption_2" class="nivo-html-caption">

<a href="#">put your image2 title</a>.

</div>

<div id="htmlCaption_3" class="nivo-html-caption">

<a href="#">put your image3 title</a>.

</div>

<div id="htmlCaption_4" class="nivo-html-caption">

<a href="#">put your image4 title</a>.

</div>

</div>

<script type="text/javascript">

var EnkiduNoConflict = jQuery.noConflict();

EnkiduNoConflict(window).load(function() {

EnkiduNoConflict('#slider').nivoSlider();

});

</script>

also added

<link rel="stylesheet" href="{parse block="ipcontent_files"}/assets/themes/pascal/pascal.css" type="text/css" media="screen" />

<link rel="stylesheet" href="{parse block="ipcontent_files"}/assets/nivo-slider.css" type="text/css" media="screen" />

<link rel="stylesheet" href="{parse block="ipcontent_files"}/assets/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script src="{parse block="ipcontent_files"}/assets/jquery.nivo.slider.pack.js"></script>

in globaltemplate
the sekelton appeared but not the pictures
can you help?

[Enkidu]

could be jquey conflicting with something else. Where exactly have you put jquery? Do you have any live example that I can look at?

[Tariq Hashim]

let me send u my site credentials in pm

[Enkidu]

PM received and replied

[ihn]

The JS appears to be having conflicts with my IP Board.

EDIT: Nevermind, I think it's fixed.

[KevinMc]

The JS appears to be having conflicts with my IP Board.

What hooks do you have installed/ enabled?

[SubStrider]

Have two questions -
1. How do I change the scroll time of the slider? I don't know javascript so you will have point me to the line. :P
2. I was trying to change the look of the slider but the block template does not seem to have all the HTML. What do I need to edit to move around the divs a bit?

[Enkidu]

Have two questions -

1. How do I change the scroll time of the slider? I don't know javascript so you will have point me to the line. :tongue:

2. I was trying to change the look of the slider but the block template does not seem to have all the HTML. What do I need to edit to move around the divs a bit?

1-to control the speed of rotation, open the block from your ACP, IP.content section and find:

<script type="text/javascript">

	var EnkiduNoConflict = jQuery.noConflict();

	EnkiduNoConflict(window).load(function() {

		EnkiduNoConflict('#slider').nivoSlider();

	});

</script>

change to

<script type="text/javascript">

	var EnkiduNoConflict = jQuery.noConflict();

	EnkiduNoConflict(window).load(function() {

		EnkiduNoConflict('#slider').nivoSlider({animSpeed: 500,pauseTime: 1000});

	});

</script>

the pauseTime represents the time each slide will show where as animSpeed represents the speed of animation.



2- not sure what you mean. can you show it to me?

[SubStrider]

1-to control the speed of rotation, open the block from your ACP, IP.content section and find:

2- not sure what you mean. can you show it to me?

1. Thanks for this

2. Let me explain :)

Currently the div heirarchy is set like this

<div class="slider-wrapper theme-orman">

   <div class="nivoSlider" id="slider">

	  <div class="nivo-caption"></div>

	  <div class="nivo-directionNav"></div>

	  <div class="nivo-controlNav></div>

   </div>

</div>

I want to change it to

<div class="slider-wrapper theme-orman">

   <div class="nivoSlider" id="slider">

	  <div class="nivo-caption"></div>

   </div>

   <div class="nivo-directionNav"></div>

   <div class="nivo-controlNav></div>

</div>

[Enkidu]

1. Thanks for this

2. Let me explain :smile:

Currently the div heirarchy is set like this

<div class="slider-wrapper theme-orman">

   <div class="nivoSlider" id="slider">

	  <div class="nivo-caption"></div>

	  <div class="nivo-directionNav"></div>

	  <div class="nivo-controlNav></div>

   </div>

</div>

I want to change it to

<div class="slider-wrapper theme-orman">

   <div class="nivoSlider" id="slider">

	  <div class="nivo-caption"></div>

   </div>

   <div class="nivo-directionNav"></div>

   <div class="nivo-controlNav></div>

</div>

that wouldn't work because the JS assumes all of these to be children of #slides



unless you find a way to change the code, it won't simply work