Jump to content

Download: 3D jQuery Featured Articles Slider


Enkidu

Recommended Posts

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:

Link to comment
  • Replies 214
  • Created
  • Last Reply

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?

Link to comment

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.
Link to comment

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

Link to comment

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.
Link to comment

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!
Link to comment

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!
Link to comment

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.

Link to comment

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.
Link to comment

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?
Link to comment
  • 3 weeks later...
  • 2 weeks later...

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?

Link to comment

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?

Link to comment

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>

Link to comment

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
Link to comment

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...