Sto realizzando un sito in responsive design, nella parte alta della pagina c'è uno slider con delle immagini che scorrono una alla volta.
Vorrei che questo slider cambi dimensione al cambiare della dimensione del display.
Secondo voi è possibile fare una cosa del genere?
Perchè a me non funziona, cioè rimane sempre della dimensione (playlistWidth: 250)
Evidentemente i fontenuti degli if non vengono interpretati.


codice:
<? 
echo "<script language=\"JavaScript\">\n"; 
echo "jQuery(function() {\n"; 

echo "jQuery('#allinone_bannerWithPlaylist_easy').allinone_bannerWithPlaylist({\n"; 
echo "skin: 'easy',\n"; 
echo "defaultEffect: 'fade',\n"; 
echo "autoPlay: 8,\n"; 
echo "responsive:true,\n"; 
echo "borderColor: '#000000',\n"; 
echo "circleColor: '#ffffff',\n"; 
echo "width: 940,\n"; 
echo "height: 384,\n"; 
echo "borderWidth: 0,\n"; 
?>

<? 
if ("<style type='text/css'> @media only screen and (min-width: 992px) { } </style>")
{

echo "playlistWidth: 250,\n"; 

}
elseif ("<style type='text/css'> @media only screen and (min-width: 768px) and (max-width: 991px) { } </style>")
{

echo "playlistWidth: 350,\n"; 

}
elseif ("<style type='text/css'> @media only screen and (min-width: 480px) and (max-width: 767px) { } </style>")
{

echo ""; 

}
elseif ("<style type='text/css'> @media only screen and (max-width: 479px) { } </style>")
{

echo ""; 

}
?>

<? 
echo "showThumbs:false,\n"; 
echo "numberOfThumbsPerScreen:4\n"; 
echo "});\n"; 	
			
echo "});\n"; 
echo "</script>"; 
?>