Download: 3D jQuery Featured Articles Slider

[Enkidu 588]

File Name: 3D jQuery Featured Articles Slider
File Submitter: Enkidu
File Submitted: 03 Sep 2011
File Updated: 08 Sep 2011
File Category: IP.Content Blocks

This block will show the last 4 IP.Content articles in an amazing image slider. The slider is powered by jQuery and features
3D-simulated transition effects. In addition, it comes with three-ready to deploy styles ensuring that you won't get stuck with only one layout....and it's free :wink:

features
1- Three ready to use theme (see the attached screenshots).
2- No conflict with prototype JS (i.e IPB friendly)
3- Your article title and link appears down the image.
4- ready to use test page for you to build upon.

limitation
The javaScript plugin will resize itself to the size of the biggest image. Therefore, you should choose your images to be all of the same size to avoid overlapping.


demo
The Orman theme should display like the following (please note that the articles links are disable in this demo)
3D jQuery Featured Articles Slider

credit
Gilbert Pellegrom of dev7studios.com

Click here to download this file

[DoorMadeEasy 13]

Thanks akot I try to view ur site but it is blocked ib my country dose it have adult content
?
Thanks anyway

[Enkidu 588]

Hi there

No it doesn't have any adult content. My website promotes Naturalistic/atheist world view so there is no doubt it's going to be banned in UAE, SA, and Iran!

Nonetheless you can still view the attached screenshot...and I'm planning to support Arabic Language too!

sorry for that again :)

[Enkidu 588]

updated!


* Added a check to exclude articles without images
* JS is now looking for the rel tag rather than the title tag which improves the slider SEO-wise.
* support for non-Latin article titles.
* added an test page with IPB wrapper

[Benny. 33]

hi no images are parsing , all installed and displaying otherwise. il send you url via pm

thanks

[Enkidu 588]

replied to your PM :)

just for the record guys. The block pulls your article image. if the article doesn't have an image then there will be nothing to display.

[xChris777 10]

Sorry to sound like an idiot, but I don't understand step 3.
Where do I put those codes?

[Enkidu 588]

Hi there

first, are you using IPB wrapper?

[xChris777 10]

Hi there

first, are you using IPB wrapper?

Yes I am :)

[Enkidu 588]

then when you create a page, put the following at the very top

<style>

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

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

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

</style>

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

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

then you can design your page the way you want and place the block where you want it to appear with:

{parse block="Enkidu3DImageSlider"}

you might wanna delete the line

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

if it started to distort your page appearance.

[xChris777 10]

then when you create a page, put the following at the very top

<style>

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

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

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

</style>

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

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

then you can design your page the way you want and place the block where you want it to appear with:

{parse block="Enkidu3DImageSlider"}

you might wanna delete the line

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

if it started to distort your page appearance.

thanks a ton, I got it working now :)

[xChris777 10]

Does this look right to you? (I currently deleted my articles, but the slider is working).
Also, is there anyway I can make that a "front page"? Like where my domain would go straight to that?

http://newrevgaming.com/index.php?app=ccs&module=pages&section=pages&folder=&id=5

[Enkidu 588]

looks OK to me but you need to add more so we can see if it rotates the images or not. Please ensure that your images are all at right size and of a very good quality

[xChris777 10]

looks OK to me but you need to add more so we can see if it rotates the images or not. Please ensure that your images are all at right size and of a very good quality

I've now added two articles with images.
For some reason, clicking the arrows won't work. If you want, I can make an account for you and let you check it out

[Enkidu 588]

looks like a bug. Please keep that page on while I see what i can do.

thanks

[xChris777 10]

looks like a bug. Please keep that page on while I see what i can do.

thanks

Sure thing, here's the new url to it: http://newrevgaming.com/index.php?app=ccs&module=pages&section=pages&folder=&id=6

[Enkidu 588]

OK I have found the issue

version 1.02 is up....please download and re-upload the contents of the upload directory. Then clear your browser cache

thanks

[+TackleUnderground 54]

Great block, I almost had my own version of this working on 3.1.x unfortunately it conflicts with the fusionmenu add-on.

If someone could fix that I'd love this slider front and center on my homepage.

All the best and thank you for your contribution!

[Enkidu 588]

Hi redg8r

I'm not sure what is the fusionmenu add-on. if you can show me an example of it. I might be able to help :)

[+TackleUnderground 54]

That would be awesome.

FusionMenu:
http://community.invisionpower.com/files/file/3613-fusion-menu/

Running on my 3.2:
http://www.tackleunderground.com/community/

[Enkidu 588]

I wouldn't think this slider would conflict with fusionMenu. Just give it a try and see if it'll work for you :)

[Jaeson Vergara 3]

Hi there, i have an issue, when i used on my web i realize some kind of delay between text and images presentation, is it timing equals and is it configurable?, can u help me to see what is happening pls.

http://www.rpgamerz.com/

Thx in advance

[Enkidu 588]

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

[Bernabe Guerra Jr. 46]

I really like this block and was wondering if it can be simply be used for photos and not have to be tied in to pull from content. or is there a way to just pull photos from content? Need some help as I'm new to all of this and trying to get this up and running to help Soldiers around the world.

Thanks,
Ben

[Enkidu 588]

Do you mean pull images from Gallery? Sure it can be done but the issue is: I don't have IP.Gallery to develop such a block sorry :(