Jump to content


Photo
Better-Carousel

Better Carousel Customized for iBlogPro5

iBlogPro5

  • Please log in to reply
3 replies to this topic

#1 Tang

Tang

    Advanced Member

  • Members
  • 51 posts
  • LocationFrankfurt - Germany
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 17 April 2013 - 02:26 AM

Hi Nick,

want to share my customization work for wonderful Better-Carousel to integrate beautifully into iBlogPro5 plus adding two suggestions and wishes for the product to make the better even better ;)

First of all: unfortunately out of the box iBlogPro5 will overwrite Better-Carousel if you have an activated iAccordion-Section because of a jQuery-conflict! Using the Framework only - no problem.
This was reported and solved in the following topic:

 

http://www.pagelines...ousel/?p=155821

 

Better-Carousel needs a proper working jQuery for its responsive design! For a shortcut I pasted the solution part of the threat in here:

 

 

* * *

 

»To be more specific:  jQuery UI 1.8.16 - from iAccordion seems to be causing a conflict with jQuery FlexSlider v2.1 in Better-Carousel.

 

My solution was: erasing  jQuery UI 1.8.16 in pagelines-iblogpro5 > sections > iaccordion > jquery.ui.accordion.js

And don't touch the parts: jQuery UI Widget 1.8.16 and jQuery UI Accordion 1.8.16 ! They seem to be responsible to have a working accordion widget in the sidebar.

 

I'm not a pro and I was just playing around with that, but this gave me a working Accordion-Widget + the Better-Carousel working like default and untouched.

Please note: Editing directly in the core will be overwritten with future updates - so whenever you install a iBlogPro5-Update - you might have to redo this work! «

 

* * *

 

1. Suggestion - images should not be cut scrolling to the next set of images - two screenshots show what I mean:

http://www.screencas.../t/UO6RPwwVemui

1st screenshot shows the layout and design of the first set of images in the carousel - perfectly fitting into the box.

http://www.screencas.../t/ns8WbbbbUu05

2nd screenshot shows the images being cut after scrolling to the next image sets. I would prefer they would neatly fill the space and not be cutted - behaving like in the pagelines carousel!


2. Suggestion - It would be nice if you could add the text-blend-in effect on <hover> like in the pagelines carousel as an option. Would look great, I think.


So here is my Customization-CSS from the screenshots above for anybody who wants to add Better Carousel to iBlogPro5 and play around with it - enjoy:

 
/* BETTER CAROUSEL (Margins, Shadows etc.) */

.better-carousel .slides li, .better-carousel.better-clone .slides li {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    margin: 1px 0px 3px 1px; 
    padding: 3px;
}

#better-carousel li {
    margin-right: 14px;
}

/* BETTER CAROUSEL (Box etc.) */   
    
.better-carousel, .better-carousel.better-clone {
    background-color: #FAFAFA;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #F2F2F2);
    background-repeat: repeat-x;
    border: 1px solid #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    padding: 20px 20px 5px;
    text-shadow: 0 1px 0 #FFFFFF;
    border-color: #E4E4E4 #CCCCCC #BBBBBB;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #CCCCCC;
}

.better-control-nav {
    margin-top: 5px;
}

/* BETTER CAROUSEL (Navigation Buttons) */   

.better-control-paging li a {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #E7E9EC;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.4);
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
}

/* BETTER CAROUSEL (Titelbox Adjustments) */

.better-carousel-item-title {
    height: 65px;
    margin-right: : -4px;   
    padding: 5px;
    background: none;
    box-shadow: inherit;
    line-height: 15px;
}

/* BETTER CAROUSEL (Text istance to image (-) values bringing text into the image and overlay) */

.better-carousel .slides li img, .better-carousel.better-clone .slides li img {
    display: block;
    margin-bottom: 0px;
}

Aloha - Tang



#2 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 17 April 2013 - 04:05 PM

Thanks for this! I'll pin this at the top for any others.



#3 Tang

Tang

    Advanced Member

  • Members
  • 51 posts
  • LocationFrankfurt - Germany
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 17 April 2013 - 06:03 PM

Great!

 

So what do you think of my suggestions? Any plans to integrate them into Better Carousel? Or could you eventually provide a solution for me to put into Custom-CSS.

 

The thumbs beeing cut when scrolling are hard to accept, specially if they provide text information, which is also sliced in pieces. When you scroll on you can try to put the puzzle pieces together in your mind - not the best solution. As I can see, you also have this in your demo. I think this is a top priority for the design of better-carousel!



#4 Tang

Tang

    Advanced Member

  • Members
  • 51 posts
  • LocationFrankfurt - Germany
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 18 April 2013 - 02:02 PM

Nick, I did a modification editing underlying Flexslider2 parameters in the corresponding better-carousel > section.php adding values for: minItems: 2, + maxItems: 7

 
<script type="text/javascript">
            jQuery(window).load(function() {
              jQuery('.better-carousel.<?php echo $clone_class;?>').flexslider({
                animation: "slide",
                controlNav: <?php echo $better_carousel_show_ctrlnav;?>,
                animationLoop: true,
                slideshow: <?php echo $better_carousel_slideshow;?>,
                slideshowSpeed: <?php echo $better_carousel_ss_speed;?>,
                itemWidth: <?php echo $better_carousel_item_width;?>,
                itemMargin: 5,
                 minItems: 2,
                 maxItems: 7,
                namespace: "better-",
              });
 

That did the trick and works to adjust better-carousel behavior without cutting off images! But careful - the Margin-Right has to be properly adjusted to get a proper scrolling! Mismatch leads to cutoff again. I haven't found out how to autospace the thumbs …having  that feature would be great and making this much easier. In my case with the 7 Items I used this setting in Custom-CSS:

 
#better-carousel li {
    margin-right: 4px;
}

Aloha - Tang  :)







Also tagged with one or more of these keywords: Better-Carousel, iBlogPro5