Jump to content

Download: 3D jQuery Featured Articles Slider


Enkidu

Recommended Posts

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

Link to comment
  • Replies 214
  • Created
  • Last Reply

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

Link to comment

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.

Link to comment

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

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

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

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...