Download: 3D jQuery Featured Articles Slider

[Bernabe Guerra Jr.]

What other possible ways are there by whatever means to pull posted photos in IPB using your block? Do you need content, gallery, regular HTML pages, etc?

[Enkidu]

Let me see what I can do regarding that. I actually wanted to use the piecemaker2 for sliding images rather than using JS based slider. But again let me see what I can do tonight...if I managed to find some alcohol :drool:

[Bernabe Guerra Jr.]

Shots of patron makes you think better..lol sure could use the help with this.

Thx,
Ben

[Enkidu]

OK. This might work. Tell me if it didn't.

1- In IPC blocks page, click add block
2- choose feed, then Gallery
3- give the block whatever title you want and whatever key you want but you'll need to remember the key name later on
4- for the content type, leave it on images
5- choose your filtering and sorting options
6- for the caching, choose 1 minutes or more it depends really
7- in the template edit box, delete the default content generated by IPC and copy and paste my block content which you should already have.
8- click next and then save and finish

Now go to where you want the images slider to appear and put {parse block="key"} where key is the name you chose in step 3

don't forget to include the JS and CSS files :smile:

[Bernabe Guerra Jr.]

I guess I should of mentioned that I don't have gallery, I would have to purchase it. I'm wondering if there's another way, like uploading photos to a folder and pulling it from there. Not sure if that would work.

Ben

[Enkidu]

Ah! that's easier. Just create a regular html block (choose custom block type), then paste the following code in the block template:

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

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

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

			    <img src="url to image1" alt="put your image1 title" title="put your image1  title"  rel="#htmlCaption_1"/>

			   <img src="url to image2" alt="put your image1 title" title="put your image2  title"  rel="#htmlCaption_2"/>

			    <img src="url to image3" alt="put your image1 title" title="put your image3  title"  rel="#htmlCaption_3"/>

			    <img src="url to image4" 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>

edit url to image1,2,3, and 4, and the titles and links to your liking...you can evn add more images if you like as long as you follow the same structure :)

[Jaeson Vergara]

I can't seen any delay on your page once loaded using google chrome. but yeah the animation is configurable.

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.

cheers

Thx it is really usefull to config that timing, another question, is ther a way to reduce the size font of my actual template?, because when title is very large the letters overlapped.

Thx in advance.

[Enkidu]

Thx it is really usefull to config that timing, another question, is ther a way to reduce the size font of my actual template?, because when title is very large the letters overlapped.

Thx in advance.

sure. Open pascal.css, find:

.theme-pascal .nivo-caption a {

	color: #333333;

	font-size: 27px;

	font-weight: bold;

	text-transform: uppercase;

}

reduce the font size to your liking. I'd suggest 25px :smile:

cheers

[Jaeson Vergara]

Thx, when u said open pascal.css u mean in my pc and then reupload all? or where can I find that file to do that?

two more things, first can I modify the slider image? and reupload it? and if it's posible, how can i do that, because i try and also delete my cache files, but the image still the same that before.

Also I noticed that in style.css file u have:


.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}

It means that I can make my own style? If yes how can I add it?

[Enkidu]

Hi

I'm not sure what you mean by modify and reupload the image? did you mean an article image? If yes, the block might still be pulling the cached content. Just open the block and re-save it (or wait for the cache period to end).

sure you can make your own style if you understand CSS structure then yeah you can do what ever you want :)

[Jaeson Vergara]

no, i mean slide image for pascal them for example, and when u said open pascal.css u mean in my pc and then reupload all? or where can I find that file to do that?

[Enkidu]

yes...you can find pascal.css on your computer inside the upload directory and then all you need is to upload that file to your website keeping file structure intact. (or upload them all if you don't know what that means)

[Jaeson Vergara]

tvm take a look to our updates: www.rpgamerz.com

[Enkidu]

It's a very nice design but the title is not clickable . I guess the z-index has been set wrong ... what did you set for that?

[Enkidu]

yeb...in orman.css

find:

.theme-orman .ribbon {

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

    height: 377px;

    left: 1px;

    position: absolute;

    top: 0;

    width: 720px;

    z-index: 300;

}

remove the z-index line

[Jaeson Vergara]

well yes we got a problem with that, because if i remove the z-index then the inside borders of the design were covered by the articles images, so I use the normal code for the outside parts of the image slider:


.theme-orman.slider-wrapper {

background:url(slider.png) no-repeat;
width:720px;
height:377px;
margin:0 auto;
padding-top:63px;
position:relative;
}

and add two more images cutting the inside borders of our image:


.theme-orman .mario{
background:url(mario.png) no-repeat;
width:225px;
height:305px;
position:absolute;
top:0px;
left:1px;
z-index:300;
}

.theme-orman .matacho{
background:url(matacho.png) no-repeat;
width:254px;
height:373px;
position:absolute;
top:0px;
left:468px;
z-index:300;
}

In this way the title back to be clickable :), because like u said it was not clickable because of overlapped of image, now we want to do the article image clickable, some advice for that?

And really thx for ur design it's very ordered and code is easy to understand and manage.

[Enkidu]

To make the image clickable, open the block from your ACP, IPC, then blocks, find:

<img src="{$r['image']}"  alt="{$r['title']}" title="{$r['title']}" rel="#HTMLCaption_{$SliderNo}" />

change to

<a href="{$r['url']}"><img src="{$r['image']}"  alt="{$r['title']}" title="{$r['title']}" rel="#HTMLCaption_{$SliderNo}" /></a>

that should do the trick :)

[Jaeson Vergara]

omg tvm really easy :D working now

[SG Staff]

I have this installed and working great (awesome block btw!!!), except it is causing a Stack Overflow Error on IE8. I am not sure how to stop it. It works fine on Chrome and safari.

[Enkidu]

I've never tried it under IE8 or even 9 .... I don't have em. I will try to investigate when I have access to a machine with IE on it.

sorry for that.

Today I'm gonna be releasing a flash based image rotator (using the piecemaker 2) it has over 50 settings and can slides videos as well :)

[Enkidu]

OK I've submitted the block and I'm waiting for approval. Here is a demo :)

http://www.tabee3i.com/page/testing/flashSlider.html

[Enkidu]

it's here:

http://community.invisionpower.com/files/file/4813-flash-image-and-video-rotator/

[KevinMc]

This modification is really nice! If there was a donate button somewhere, I would donate, or even pay for it. The mod works great with IP.Content 2.2.1. Kudos to Enkidu, and whoever else was a part of designing this. Thanks!

[Enkidu]

thank you Kevin hearing that from you is bigger than a donation

[KevinMc]

thank you Kevin hearing that from you is bigger than a donation

The pleasure is mine, sir. :thumbsup:

Having a great product, and great support (especially for a FREE modification!?!?!) is far beyond the average standards! For that, sir, I thank you.

One quick question, how do I adjust the default dimensions of 618 x 246 pixels.

I'd like to specify my own...maybe 500 x 250 or something like that.