Responsive e data attribute

[flash20]

Ciao a tutti, ho un problema, uno script jquery applica un determinato effetto a partire da un numero di pixel che andiamo ad indicare, fino ad una altro numero (es. da 0px fino a 500px), questi valori vengono forniti con i data attributes.
Il mio problema è che utilizzando il responsive ho bisogno di variare i valori a seconda della risoluzione

In sintesi con i css e/o il responsive posso variare i dati che trovate in questa stringa:

<div data-0="opacity:1" data-500="opacity:0" class="gallery">

Nello specifico dovrei variare il numero dopo data per esempio in questo modo:

per gli smartphone: data-0 data-500
per i tablet: data-200 data-800
per i pc: data-500 data-1000

Grazie

[flash20]

Ti ringrazio, ho provato a usare lo script che mi hai passato ma non riesco a farlo funzionare

[flash20]

Script originale

<div class="gallery">
<div class="gallery_img"><img style="height:100%; width:100%;" src="immagini/gallery.png" /></div>
<p>RELAX,<br/>NATURA<br/>& SAPORI</p>
</div>

Script modificato

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div data-0="opacity:1" data-500="opacity:0" class="gallery">
<div class="gallery_img"><img style="height:100%; width:100%;" src="immagini/gallery.png" /></div>
<p>RELAX,<br/>NATURA<br/>& SAPORI</p>
</div>
<script>
var res = $(window).width();
if(res > 1024){
    $(".gallery").attr("data-500","opacity:20");
    
}
</script>

Ho provato a mettere gli script anche nell'HEAD ma non va

[flash20]

Ho provato a togliere gli altri script, ma non funziona, probabilmente lo script in se va, ma non con lo script che usa i data attributes che vogliamo modificare