Jump to content

Archived

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

grahamd79

Ibox links to Modals

Recommended Posts

grahamd79    3
grahamd79

Hi, I have been playing around with iboxes, specifically trying to create scrollable modal windows to pop up when clicking the ibox.

Initially I tried with a css3 only solution which I almost got working but it is not scrollable so does not work responsively and it has no js fallback.

 

Anyone got any ideas how to get a scrollable modal going as a link from an ibox?

 

Thanks.

 

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

You would most likely need to customize the iBox section yourself and play around with the section.php.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
grahamd79    3
grahamd79

Thanks Danny,

 

I played around with it and it works a treat for modals in the iboxes! I'll show what I did in case any one else needs a hand with this sort of functionality:

 

All I did was to copy the ibox section into the base theme and rename the plugin to Modal Ibox (to prevent confusion) and changed two lines of the section.php

Line 162

From

$text_link = ($link) ? sprintf('<div class="ibox-link"><a href="%s">%s <i class="icon-angle-right"></i></a></div>', $link, __('More', 'pagelines')) : '';

To

$text_link = ($link) ? sprintf('<div class="ibox-link"><a %s>%s <i class="icon-angle-right"></i></a></div>', $link, __('More', 'pagelines')) : '';


Line 191

From

$media_link = sprintf('<a href="%s">',$link);

To

$media_link = sprintf('<a %s>',$link);



Then this allowed for a full link with classes and IDs - e.g. href='#modal-link' class='modal-plugin-class' etc. which could be connected easily to any typical modal plugin - (I used foobox for this one). Using single quotes for the link code kept it visible on the DMS front end after refresh.

  • Like 2

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thanks for sharing.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
TourKick (Clifford P)    1
TourKick (Clifford P)

ahansson89 - consider adding as an option to Better iBoxes ?

Share this post


Link to post
Share on other sites

  • Similar Content

    • Jesper
      By Jesper+
      Is there a way to create modal popups? It was possible ind DMS2
    • Audun MB
      By Audun MB+
      I've added a number option (ie the first box has a 1 next to or above, second box has 2, etc) to iBoxes in DMS (as a custom section), and I'd like that for PL5 Boxes as well. Adding it for iBox was quite easy:
      First this: 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pagelines' ) ), 'count' => array( 'name' => __( 'Counter', 'pagelines' ) ), 'image' => array( 'name' => __( 'Images', 'pagelines' ) ), 'numb' => array( 'name' => __( 'Number', 'pagelines' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pagelines' ) ) And then this } elseif( $media_type == 'numb' ){ $background = ($color) ? sprintf('<span class="invert-icon" style="background-color: %s;"></span>', $color) : ''; $media_html = sprintf( '<i class="iii icon iboks-number" style="%s">%s</i>%s', $text_color, $count, $background ); } And some CSS (though I used the style for icon mostly). iBox already did know which number the box had in the sequence, so adding the number was quite simple. 
      The Boxes code, and PL5 code in general, is a bit mor complex with javascript (with Knockout) and php, and some CSS cheats. It took me a while to figure out how it works, and I'm not sure I quite grasp it yet.
      Adding a number option to the media array is the same as iBox:
      array( 'key' => 'ibox_media', 'type' => 'select', 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pl-section-boxes' ) ), 'count' => array( 'name' => __( 'Counter', 'pl-section-boxes' ) ), 'boxnumb' => array( 'name' => __( 'Numbering', 'pl-section-boxes' ) ), 'image' => array( 'name' => __( 'Images / SVG', 'pl-section-boxes' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pl-section-boxes' ) ) ), 'default' => 'icon', 'label' => __( 'Select iBox Media Type', 'pl-section-boxes' ), ), In the section template I'll add a line for the boxnumber. In addition I have to add variuous boxnumb classes in the build.less file to make it hidden by default and style it.
      function section_template(){ ?> <script type="text/html" id="boxes-template"> <a class="boxes" data-bind="class: boxclass() + ' pl-col-sm-' + $root.ibox_cols(), plhref: link" > <div class="boxes-pad" data-bind="class: 'pl-control-'+ $root.ibox_format()"> <div class="boxes-media media-left"> <span class="the-boxes-media pl-animation pl-appear" data-bind="class: 'media-'+$root.ibox_media(), style: { color: color, width: $root.image_width() + 'px', opacity: $root.image_opacity}"> <div class="pl-image" data-bind="plbg: image, class: $root.image_format"></div> <span class="pl-counter" data-bind="pltext: count"></span> <span class="pl-boxnumb" data-bind="pltext: ?numbervalue?"></span> <i class="boxes-icon pl-icon" data-bind="class: 'pl-icon-'+icon()"></i> </span> </div> <div class="boxes-text media-right"> <h3 class="boxes-title" data-bind="pltext: title"></h3> <div class="boxes-desc" data-bind="pltext: text"></div> </div> </div> </a> </script> Where I'm stuck is how to get the number to supply to pltext. Since the boxes are numbered in the configuration panel (showing as Item 1, Item 2, ...) I guess there is something in the code that could give me the box number, but what would that be? Finding it in the pure php code of iBox was quite easy, but the Javascript-Knockout.js-PHP code in PL5 isn't that easy to read. 
      I realise that I'm developer terrority now, but I'd appreciate any help. I guess this could be useful for more people if get it to work. Maybe it should be added as a standard option? "X things you need to know" or similar is staple website content and the Boxes section is ideal for that with numbers. On our website the "X things you need to know"-pages is half our traffic. 
    • laka74
      By laka74+
      Dear support,
      I'm having problems using the iBox - can't change anything or delete it ?!
      http://seriousplay.training/
      Best
      regards
      Lasse Kramer
    • janpeeters
      By janpeeters+
      Hi all,
      I was totally excited to find out about 'CSS Hero' (http://www.csshero.org) I read about it in the compatible plugins section of the PL5 docs (http://www.pagelines.com/resources/compatible-plugins) For me it's a great way to more easily customize my sites because I'm not a CSS pro.
      I'm wondering about one thing though… Does anyone know if using this will result in a heavy penalty on page loading speeds? Would love to start using it but only if it doesn't cost too much in terms of speed.
      Thanks, Jan
    • Audun MB
      By Audun MB+
      I'd like to have the images in iBox to look different with the following CSS. This works when manipulating the CSS with Inspect element in Chrome, but I can't get it to work as a class. Here's the class:
      .imagecontain {     border-radius: 1px;     background-size: contain;     background-repeat: no-repeat;       } This is from my style.less in the child theme. I applied the class to the iBox with custom class option, though nothing happens. How to fix that? How do I target only the div with the image in with CSS?
×