143 Posts
10 years ago
3
Topic
Hi all,
EDIT: Here is the solution (workabout) I published on march 1st 2014
I (we) tried 2 workarounds to call a modal box (or lightbox) with content instead of a picture inside a Seblod environment. It works but it doesn't feel 'right'.
After Googling for 'Colorbox' I saw that it can load content, iframes, YouTube, Vimeo etc too. Above all, it does it much faster and in a cleaner way.(see example here => inline HTML) .
Unless I'm mistaken, Colorbox needs 2 .js scripts which seemingly already are present in the [head] section of my site with Seblod. So in principle there's no need to call in 3rd party 'bloatware'.
Now, please (urgent), how do we show Seblod content in a (Jquery?) colorbox instead of bloating our sites with 3rd party workarounds? Seblod already expands pictures via colorbox, so why not use it for the rest too?
Your steps to follow in a 1) 2) 3) .. manner will really help anyone dreaming of having a smooth joomla 3.x+ site integrated with Seblod inducing colorboxes where need be.
Thank you,
Bernard
52 Posts
10 years ago
2
Level 1
Here is how I embed youtube videos in colorbox with a custom template position override. You need to trigger colorbox for your content. If js and css already included in your page head, you don't need to do it again, just use the addCustomTag part with your css selector instead of ".yt-video".
<?php
$doc =& JFactory::getDocument();
$doc->addStyleSheet( 'media/cck/scripts/jquery-colorbox/styles/style0/colorbox.css' );
$doc->addScript("media/cck/scripts/jquery-colorbox/js/jquery.colorbox-min.js");
$doc->addCustomTag( '
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".yt-video").colorbox({iframe:true, innerWidth:560, innerHeight:365});
});
</script>
' );
?>
<div class="youtube">
<ul class="videolar">
<?php foreach($cck->get( 'video_x' )->value as $n=>$fx){ ?>
<li id="<?php echo $n ?>">
<a class="yt-video btn cboxElement" href="//www.youtube.com/embed/<?php echo $fx->value; ?>?rel=0">
<img width="215" height="154" src="http://img.youtube.com/vi/<?php echo $fx->value; ?>/mqdefault.jpg" />
<img class="yt-play-btn" src="/templates/t3_blank/images/play.png" />
</a>
</li>
<?php } ?>
</ul>
</div>
143 Posts
10 years ago
1
Level 2
Ok melihtas, thank you but this is for YouTube, ain't it?
What I'm actually looking for is (for example) this scenario:
1) I'm in an 'Item' view of a 'Search & List' result
2) When I click on the title, it opens the Content view (seb one) in a colorbox instead of a new page.
Thank you,
Bernard
What I'm actually looking for is (for example) this scenario:
1) I'm in an 'Item' view of a 'Search & List' result
2) When I click on the title, it opens the Content view (seb one) in a colorbox instead of a new page.
Thank you,
Bernard
52 Posts
10 years ago
0
Level 3
Ok then you need to include the script into item view template and you need to show your content in colorbox iframe but if you put standart link to your content your whole site will show in the iframe so you need a barebone template. Have a look at this tutorial;
http://www.chrisduell.com/blog/development/jquery/ajax-in-joomla-with-jquery/
http://www.chrisduell.com/blog/development/jquery/ajax-in-joomla-with-jquery/