iskin4 Lightbox - Video Support - The Jamroom Network

PatriaCo
@the-patria-company
8 years ago
349 posts

Hey Nate,

Does the lightbox in iSkin4 support video?

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
updated by @the-patria-company: 11/15/16 04:25:44PM

@nate
8 years ago
917 posts

It's the same lightbox as all skins. I think it does. I'm not sure.

PatriaCo
@the-patria-company
8 years ago
349 posts

So if we use this code for displaying the gallery in the lightbox:

<a href="{$jamroom_url}/{$murl}/image/gallery_image/{$_i._item_id}/1280" data-lightbox="images_{$_i.gallery_title_url}" title="{$_i.gallery_caption|default:$_i.gallery_image_name|jrGallery_title_name:$_i.gallery_caption}">
 {jrCore_module_function function="jrImage_display" module="jrGallery"
                              type="gallery_image" item_id=$_i._item_id size=$size crop=$aspect
                              alt=$_i.gallery_alt_text width=false height=false}</a>

What would you suggest as the code for displaying a youtube video?

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
updated by @the-patria-company: 08/12/16 08:00:44AM

@nate
8 years ago
917 posts

You can try creating a template and then do this

<a href="{$jamroom_url}/new_template/video_id={$item._item_id}" data-lightbox="video_{$item.video_title_url}" title="video_{$item.video_title}">

Your template will need to use $_post variables.
updated by @nate: 08/12/16 10:48:38AM

@douglas
8 years ago
2,790 posts

You might be better off using a modal window instead of lightbox for this.

@ultrajam has a doc on it here:
https://www.jamroom.net/ultrajam/documentation/code/1120/how-to-use-a-modal-in-a-template

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@nate
8 years ago
917 posts

Modal is much easier, too.

PatriaCo
@the-patria-company
8 years ago
349 posts

I have successfully created a modal window for our new action form, so I am somewhat familiar with this but I am little stumped considering multiple instance on the same page. I hope I can explain this...

So, if I have a youtube video thumbnail image set as my <a> trigger to launch the modal window, but this is set in the youtube_item_action.tpl ... potentially I am going to have several triggers on one timeline page and they would all need to be unique, to call the js correctly.

How can I make the modal js accept an assigned variable? For example by using the action_id:

function myModule_modal(){
    $('#myModal-{$action_id}').modal({

I hope my question makes sense. My js skills are still basic.

Thanks

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@nate
8 years ago
917 posts

$('#myModal-{$item._item_id}')

PatriaCo
@the-patria-company
8 years ago
349 posts

I am receiving this error now:

Error: Syntax error, unrecognized expression: #youtube-{$item._item_id}

My js starts like this:

function atYoutube_modal() {
    
	$('#youtube-{$item._item_id}').modal({

Here is the trigger in my html:

<div class="media" style="text-align:center">
<a  onclick="atYoutube_modal();" title="{$item.action_data.youtube_title|jrCore_entity_string}"><img src="https://img.youtube.com/vi/{$item.action_data.youtube_id}/default.jpg" width="35%" /></a>
</div>
<div id="youtube-{$item._item_id}" class="search_box" style="display:none;">

Any thoughts?

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@nate
8 years ago
917 posts

use an underscore instead of a dash.

PatriaCo
@the-patria-company
8 years ago
349 posts

Error: Syntax error, unrecognized expression: #youtube_{$item._item_id}

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@nate
8 years ago
917 posts

You probably need to use {ldelim} and {rdelim}

PatriaCo
@the-patria-company
8 years ago
349 posts

Not sure I understand how to use those correctly. Do you have a link to some documentation on them?

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@nate
8 years ago
917 posts

Post the whole code snippet that's inside the template. I mean the js code.

Never post half. It makes it harder to help u.

PatriaCo
@the-patria-company
8 years ago
349 posts

OK sorry.

function atYoutube_modal() {
    
	$('#youtube_{$item._item_id}').modal({

        onOpen: function (dialog) {
            dialog.overlay.fadeIn('fast', function () {
                dialog.container.slideDown('fast', function () {
                    dialog.data.fadeIn('fast', function () {
					    
					});	
                });
            });
        },
        onClose: function (dialog) {
            dialog.data.fadeOut('fast', function () {
                dialog.container.hide('fast', function () {
                    dialog.overlay.fadeOut('fast', function () {
                        
						$.modal.close();
                    });
                });
            });
        },
        overlayClose:true
    });
}

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@nate
8 years ago
917 posts

function atYoutube_modal() {ldelim}
    
	$('#youtube_{$item._item_id}').modal({ldelim}

        onOpen: function (dialog) {ldelim}
            dialog.overlay.fadeIn('fast', function () {ldelim}
                dialog.container.slideDown('fast', function () {ldelim}
                    dialog.data.fadeIn('fast', function () {ldelim}
					    
					{rdelim});	
                {rdelim});
            {rdelim});
        {rdelim},
        onClose: function (dialog) {ldelim}
            dialog.data.fadeOut('fast', function () {ldelim}
                dialog.container.hide('fast', function () {ldelim}
                    dialog.overlay.fadeOut('fast', function () {ldelim}
                        
						$.modal.close();
                   {rdelim });
                {rdelim});
            {rdelim});
        {rdelim},
        overlayClose:true
    {rdelim});
{rdelim}

@nate
8 years ago
917 posts

A better way to do is like this

function myModal(id) {
      $(id).modal();
}

then in the template

onclick="myModal('#youtube_{$item._item_id}')"

updated by @nate: 08/14/16 12:31:16PM

PatriaCo
@the-patria-company
8 years ago
349 posts

This is soooooo close! It is definitely working but the modal window size is a little crazy.

I am using the basic code from the youtube_embed_iframe.tpl but I can not capture the id.width()

<script type="text/javascript">
	$(document).ready(function() {
		{* 16:9 aspect ratio instead of fixed height.*}
		var id = $('#ytplayer{$unique_id}');
		var tw = id.width();
		var th = Math.round(tw / 1.778);
		if (th < 300) {
		    th = 300;
		}
		id.height(th);
	});
</script>
<iframe id="ytplayer{$unique_id}" type="text/html" width="{$params.width}" height="{$params.height}" src="https://www.youtube.com/embed/{$item.action_data.youtube_id}?autoplay={$params.auto_play}&amp;wmode=transparent&amp;rel=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The result is always height="300px", with an empty width="". No matter the viewport width.

As soon as we have this figured out, I will post all the code. This is very cool. Thanks for the all help so far.

Just to clarify I need to figure out how to capture the id.width() for the viewport size.

Thanks!

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@michael
8 years ago
7,715 posts

PatriaCo:
Not sure I understand how to use those correctly. Do you have a link to some documentation on them?

Smarty docs are here: http://www.smarty.net/docs/en/index.tpl

{ldelim} and {rdelim} were used a lot in smarty 2, we're on smarty 3 now so you're probably not going to use them as much.

@michael
8 years ago
7,715 posts

PatriaCo:
The result is always height="300px", with an empty width="". No matter the viewport width.
As soon as we have this figured out, I will post all the code. This is very cool. Thanks for the all help so far.
Just to clarify I need to figure out how to capture the id.width() for the viewport size.
Thanks!

Make sure the id that is getting output actually exists on the page.

By the time it gets to the HTML output on the page, all the {$somtehing} will have been rendered into their actual values, so if you view the source code for the page you will see:

	$(document).ready(function() {
		{* 16:9 aspect ratio instead of fixed height.*}
		var id = $('#ytplayer123456');
		var tw = id.width();
		var th = Math.round(tw / 1.778);
		if (th < 300) {
		    th = 300;
		}
		id.height(th);
	});

Make sure '#ytplayer123456' is somewhere in the page, so that you can get the width of it.

@nate
8 years ago
917 posts

michael:

PatriaCo:
Not sure I understand how to use those correctly. Do you have a link to some documentation on them?

Smarty docs are here: http://www.smarty.net/docs/en/index.tpl
{ldelim} and {rdelim} were used a lot in smarty 2, we're on smarty 3 now so you're probably not going to use them as much.

I have to use them all the time when mixing smarty with js.

@michael
8 years ago
7,715 posts

In smarty2 they were necessary, but from smarty3 a space will be fine.

Smarty2 code:

onfocus="if(this.value=='{$svar}'){ldelim} this.value=''; {rdelim}"

Smarty3 code:

onfocus="if(this.value=='{$svar}'){ this.value=''; }"

Just make sure there is a space after the { and you dont need {ldelim}.

This will fail in smarty3

onfocus="if(this.value=='{$svar}'){this.value='';}"

because the {t..... is treated as a smarty function.

@nate
8 years ago
917 posts

I know how it works. Maybe it's a bug but there are time when u have to do it.

PatriaCo
@the-patria-company
8 years ago
349 posts

The {$unique_id} does not seem to be working in this set up. Here is my source code:

<div class="media" style="text-align:center">
          
          <a  onclick="atYoutube_modal('#youtube_2628');" title="DD Wahm by Clear"><img src="https://img.youtube.com/vi/_HAdKCzhtH8/default.jpg" width="35%" /></a>
      </div>
      <div id="youtube_2628" class="search_box" style="display:none;">
          <div style="float:right;">
              <input type="button" class="simplemodal-close form_button" value="x">
          </div>
          
            <script type="text/javascript">
				$(document).ready(function() {
					
					var id = $('#ytplayer');
					var tw = id.width();
					var th = Math.round(tw / 1.778);
					if (th < 300) {
						th = 300;
					}
					id.height(th);
				});
			</script>
			<iframe id="ytplayer" type="text/html" width="" height="" src="https://www.youtube.com/embed/_HAdKCzhtH8?autoplay=&amp;wmode=transparent&amp;rel=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
       
          <div class="clear"></div>
      </div>
</div>

Any thoughts?

--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

@michael
8 years ago
7,715 posts

Thoughts? Sure: You have no width set on the iframe, but you're trying to get its width, what are you expecting to happen? Then you're taking a value that can't possibly be set and trying to perform math on it....... I would expect bad things to happen then.....

Thoughts:
* Things might work better if you set a width/height on the iframe element.
* id's have to be unique to a page or javascript gets confused, make sure you only have 1 of these things on any one page. (or get that {$unique} working.)

@nate
8 years ago
917 posts

If you use the same ID twice, it will only work on the first one.

ISkin4 Lightbox - video support

Tags