Enkidu

Download: 3D jQuery Featured Articles Slider

215 posts in this topic

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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.