Screen widht js and liquid integration

[Neonail]

I know that liquid can't detect the screen width, but can i make something like that?

<script>
$(document).ready(function(){
var windowWidth = $(window).width();
if( windowWidth < 767 ){
{% assign MobileScreen = "YesMobileScreen" %}
}});
$(document).ready(function(){
var windowWidth = $(window).width();
if( windowWidth > 767 ){
{% assign MobileScreen2 = "NoMobileScreen" %}
}});
</script>

[Akshay_V]

@Neonail 

Yes, you can combine liquid and JS into the same function, but it is necessary that you JS file is supported liquid. It means your JS file extension must be filename.js.liquid.

Alternatively, you can assign you content to a JS variable and update it based on window width.

[Neonail]

I put the function in the main theme js file and i put a thing like this in my section but it doesn't work

[in the theme.js file ]
// detect the screen width
$(document).ready(function(){
var windowWidth = $window.innerWidth();
if( windowWidth < 767 ){
{% assign MobileScreen = "YesMobileScreen" %}
else {
{% assign MobileScreen = "NoMobileScreen" %}
}});


[In the liquid section]

{% if MobileScreen == "YesMobileScreen" %}           
            {%- render 'product-images',
              section_id: section_id,
              product: product,
              isModal: isModal,
              image_position: image_position,
              product_zoom_size: product_zoom_size,
              product_image_size: product_image_size,
              thumbnail_arrows: thumbnail_arrows,
              thumbnail_position: thumbnail_position,
              video_looping: video_looping,
              video_style: video_style
            -%}
{%- endif -%}
{% if MobileScreen == "NoMobileScreen" %}             
  {%- render 'product-images-2',
              section_id: section_id,
              product: product,
              isModal: isModal,
              image_position: image_position,
              product_zoom_size: product_zoom_size,
              product_image_size: product_image_size,
              thumbnail_arrows: thumbnail_arrows,
              thumbnail_position: thumbnail_position,
              video_looping: video_looping,
              video_style: video_style
            -%}        
{%- endif -%}

[Akshay_V]

@Neonail 

You can't combine theme.js file with any other section file. You are doing the wrong thing to use assign object. Furthermore, you just have to create two HTML blocks, inside 1st add desktop content and in 2nd block paste mobile content. Then using CSS to make is visible to particular screen. 

[Neonail]

I know this way but i have to render the whole product image gallery so in the css way the page will be heavy. 
And i have a problem with video because the double request make me hidden in mobile...

So it's impossible to do this?
read the width of the screen
assign a variable
create an if loop
insert a snippet inside
create an else loop
insert another snippet inside

[Akshay_V]

@Neonail 

As I said, you can't combine JS files with section file.

What you want to achieve for desktop and mobile by using screen width?

[Neonail]

I just want to use my theme product gallery for mobile, but use another for desktop. Just this.

[Akshay_V]

@Neonail 

I can understand, but there is no way to combine theme.js file with section file. Can you tell me what is a different between mobile gallery and desktop gallery?