Jump to content

Download: 3D jQuery Featured Articles Slider

Featured Replies

Posted

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

  • Replies 214
  • Views 10.5k
  • Created
  • Last Reply

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

  • Author

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

  • Author

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

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

thanks

  • Author

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.

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

  • Author

Hi there

first, are you using IPB wrapper?


Hi there



first, are you using IPB wrapper?



Yes I am :)
  • Author

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.


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

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

  • Author

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


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
  • Author

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

thanks


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
  • Author

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

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!

  • Author

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

  • Author

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

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

  • Author

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

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

  • Author

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

Archived

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

Recently Browsing 0

  • No registered users viewing this page.