1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Add-on [PAID]Accordion news/Image Slider

Discussion in 'Resource and Add-on Requests' started by ddmmh, Jun 27, 2011.

  1. ddmmh

    ddmmh Well-Known Member

    I am after the following if anyones able to code this, paid of course :)

    I want to have a jquery accordion slider on the top of my XenPorta(And a way to add to the top other pages such as forum list, XenMedio main page, top of thread etc)

    Here is an example of the slider @ www.mmazone.com.au/site up the top

    I want it exactly like that.

    It needs to be easy to maintain with a basic user interface to add a caption, short pre-text, link and of course the image making all of these options option-able except of course the image. The link would need an option to open in same window or new window when clicked. Just like the demo it will be 5 images

    Here is an example/idea of how I would like the 'admin' interface for the accordion slider to look;
    http://xenforo.com/community/threads/slider-banner-manager.17398/

    I understand there may be some issues with images and the sizes etc... this will need to be discussed between me and the person willing to take on the job as im not sure how to handle this yet.

    Anyone interested please PM me.

    Anyone wishing to add ideas please post them in here

    Thanks
  2. Jaxel

    Jaxel Well-Known Member

    If you can give me a link to where mmazone got their accordian, I can do this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

  4. ddmmh

    ddmmh Well-Known Member

    I think thats what is used for other images across the site(wordpress), not sure. The slider is user 'kwicks for jquery' @ http://www.jeremymartin.name/projects.php?project=kwicks

    Hi Jaxel,

    Thanks. Can you PM me pricing? I believe this is what youre after http://www.jeremymartin.name/projects.php?project=kwicks
  5. DroidHost

    DroidHost Well-Known Member

    I will see
  6. Jaxel

    Jaxel Well-Known Member

    laztrix, Andy.N, Veer and 1 other person like this.
  7. Andy.N

    Andy.N Well-Known Member

    Epic.
    Would a vanilla Xenforo installation be able to use this or it has to use some of your mods (Portal, etc)?
  8. yavuz

    yavuz Well-Known Member

    Looks fantastic Jaxel. An option for a traditional view would be awesome. Full view, navigation at the bottom.
  9. Andy.N

    Andy.N Well-Known Member

    If we can use the feed importer in Xenforo to import articles, format them up before publishing, it would be great.

    One idea I have is that we run Wordpress on the root and if we can use this to read the latest article from the front page, the forum members will be more likely to click and read the front page articles.
  10. ddmmh

    ddmmh Well-Known Member

    that looks EPIC! You even integrated videos also, outstanding!!
  11. Jaxel

    Jaxel Well-Known Member

    I did? No I didn't...
    Liam23 and DroidHost like this.
  12. ddmmh

    ddmmh Well-Known Member

    Sorry I jumped the gun. Well you kind of did, video thumbnail linked to the relevant media page... almost as good!
  13. Jaxel

    Jaxel Well-Known Member

    Okay... its pretty much done at this point... but I cant release until the next version of XenPorta, due the amount of style required for this mod... and of course, this works with XenPorta only; its a major resource hog, and to put it anywhere else on your website would be like saying "don't visit my site anymore".

    But I've integrated a few options with this mod...
    • limit: the number of items to display (integer)
    The width of each accordion element will automatically get calculated based on the limit. For instance, if you set the number of items to display as "5"; the width of each unfocused element will be 100/5, or 20%.​
    • anchor: the spot in which to anchor the image (left, center or right)
    This is basically where the image is anchored to in the accordion. If this is set to center, the image for each element will be anchored to the center of the image, so that when it expands or contracts, it keeps focus on the center. If set to left, the image is set absolutely in it's position.​
    • height: the height of the accordion (integer)
    • maxwidth: the maximum width of an expanded element (integer)
    When mousing over an element, it will expand to width of this setting. The width of the excerpt text will also automatically match the width of this setting.​
    • sticky: determines if the accordion is "sticky" (check box)
    If set, an item on the accordion will always be open, starting with the newest item.​

    Usage Notes:

    The system will automatically link into the settings for the Recent News module. It will scan the recent news forums, as well as promoted threads and search for articles that have an attachment with the EXACT NAME of "slider.jpg". If an article has "slider.jpg" attached to it, it will be added to the accordion. Using this system, you can actually have different items on the news entry than on the accordion. Since news entries prioritize in specific orders, those orders will be retained, while the accordion will search for slider.jpg, no matter the priority.​

    You can see an example of this here: http://8wayrun.com/

    You will notice the most recent news article for "Toronto Top Tiers Tournament Videos Now Available"; the image on the news portal is different than the image on the accordion because the image on the news portal is the prioritized first attachment, and the accordion searches right for slider.jpg. Using this system its easy to specify which news articles get on the accordion and which ones don't. Simply put, if it doesn't have a "slider.jpg", it won't be in the accordion.​

    Ideally, you would what your slider.jpg to match the size of the two settings you have for "height" and "maxwidth". If your image does not match these settings, it will be automatically stretched to fill the HEIGHT of the slider.​

    The next important note is that there was no way to pragmatically automatically force the width of the unfocused title text. As previously mentioned width of the unfocused element would be a percentage (such as 100/5, 20%), which is a variable length depending on selection and mouse position. If you wanted to force the width of the unfocused title text, you would need to add a small line of code to your EXTRA.css:​
    Code:
    .recentSlider li .summary .blur { width: 180px; }
    Naturally you would set the width to whatever you want, depending on your forum.​

    All other settings would have to be handled with knowledge of style sheets...
  14. yavuz

    yavuz Well-Known Member

    Can't wait to get the next version of XenPorta :D I wish there were a plain version of the slider besides the accordion style. But if it's the best way, this will work too.
  15. Jaxel

    Jaxel Well-Known Member

    What the hell is a plain version?
  16. yavuz

    yavuz Well-Known Member

    [​IMG]
  17. ddmmh

    ddmmh Well-Known Member

    Completed! Preview @ mmazone.com.au or 8wayrun.com

    Ive asked Jaxel to hold off on releasing this to the public as I did pay for it. But I would like to everyone to enjoy this so it will be included in XenPorta soon. For now though... im going to be a little selfish :p
    Digital Doctor, bogus and Veer like this.
  18. DroidHost

    DroidHost Well-Known Member

    and here is mine to !
    xenExtend.com :LOL:
    Veer likes this.
  19. Brogan

    Brogan XenForo Moderator Staff Member

    I may do one for my site as it's a useful way of squeezing in more content into a limited width.

    I'll have to do it myself though as I don't use XenPorta so won't be able to use the add-on when it is released.
  20. Andy.N

    Andy.N Well-Known Member

    If you do it, please release.
    I don't use XenPorta and i too would like to pack more content from my home page to the forum home.
    Veer likes this.

Share This Page