problema slideshow con visualizzazione mobile

arapecoston

Utente Attivo
8 Giu 2013
60
0
0
coma da titolo ho un problema con uno slideshow immagini, sul PC si vede benissimo, sul cellulare si vede bene ma mi allarga enormemente la pagina; non c'è un modo perchè si veda bene anche dal cell?
ecco il codice
HTML:
<style type="text/css">
<!-- 
.textstyle {
	/* style attributes for the comments below the pictures */
	font-family: Arial;
        font-weight: bold;
	font-size: 11pt;
	color:#b1f332;
	text-align:center;
}
.imagestyle {
	/* style attributes for the images */
	padding:5px;
}
.boxstyle{
	/* style attributes for the slideshow-box */
	border-style:solid;
	border-width:1px;
	border-color:white;
	
	/* shadow for Firefox */
	-moz-box-shadow: 3px 3px 5px #AAAAAA;

	/* shadow for Safari and Chrome */
	-webkit-box-shadow: 3px 3px 5px #AAAAAA;

	/* shadow for Opera */
	box-shadow: 3px 3px 5px #AAAAAA;
	
	/* background-color */
	background-color:#000000;
} 
-->
</style>
<script type="text/javascript">
<!-- 
// CREDITS:
// Free JavaScript Image Scroller with double-fade effect
// By Peter Gehrig
// Copyright (c) 2011 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// Prelevato ed illustrato su http://www.web-link.it
// il sito italiano per fare gratuitamente pagine web.

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

/////////////////////////////////////////////
// START OF SCRIPT CONFIGURATION 
/////////////////////////////////////////////

// Set the URLs of images, the comment and links.
// Add as many pictures a you like
// Each image requires a block, as shown below:
// {
// imgurl : "http://www.the-url.com/of/your/picture.jpg",
// comment : "the comment below the image",
// linkto : "http://www.where-you-go-if-you-click-on-a-image.com",
// }, each block ends with a comma (exception: the very last block)

var picture= [
{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/vale1.jpg",
comment : "Valè",
linkto : "http://arapecoston.altervista.org/schede/vale.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/se6.jpg",
comment : "Sergio",
linkto : "http://arapecoston.altervista.org/schede/paridin_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/me5.jpg",
comment : "Armà",
linkto : "http://arapecoston.altervista.org/schede/arma_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/rob5.jpg",
comment : "Robè",
linkto : "http://arapecoston.altervista.org/schede/robe_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/fra3.jpg",
comment : "Francè",
linkto : "http://arapecoston.altervista.org/schede/lamante_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/orf5.jpg",
comment : "Orfè Dalù",
linkto : "http://arapecoston.altervista.org/schede/orfe_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/ganascia3.jpg",
comment : "Ganascia",
linkto : "http://arapecoston.altervista.org/schede/ganascia_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/dav8.jpg",
comment : "Davide",
linkto : "http://arapecoston.altervista.org/schede/topolfuffo_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/wet6.jpg",
comment : "inculaconato",
linkto : "http://arapecoston.altervista.org/schede/inculaconato_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/giulio3.jpg",
comment : "Giulio",
linkto : "http://arapecoston.altervista.org/schede/giulio_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/dor5.jpg",
comment : "Doretti",
linkto : "http://arapecoston.altervista.org/schede/doretti_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/brut3.jpg",
comment : "Bruttino",
linkto : "http://arapecoston.altervista.org/schede/bruttino_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/brunello3.jpg",
comment : "Brunello",
linkto : "http://arapecoston.altervista.org/schede/brunello_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/jm8.jpg",
comment : "J.M.",
linkto : "http://arapecoston.altervista.org/schede/jm_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/ep7.jpg",
comment : "e.p. minuscolo conato",
linkto : "http://arapecoston.altervista.org/schede/ep_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/matteo4.jpg",
comment : "Pato",
linkto : "http://arapecoston.altervista.org/schede/pato_0002.html"
}, // comma required

{
imgurl : "http://arapecoston.altervista.org/alterpages/medium/nic3.jpg",
comment : "Nicolò",
linkto : "http://arapecoston.altervista.org/schede/nico_0002.html"
} // NO comma!!!!

]

// width of the visibie part of the slideshow (pixels)
var scrollerwidth=1055

// height of the slideshow (pixels).
// ATTENTION: The height must include height of image plus height of text!
var scrollerheight=225

// width of the transparent zones on the left and on the right (pixels)
var transparentzone_width=50

// the color for the transpranet zone on the left and on the right
var transparentzone_color="#616161"

/////////////////////////////////////////////
// END OF SCRIPT CONFIGURATION 
/////////////////////////////////////////////

// do not edit below this line
var translayerswidth=1
var translayersmax=Math.floor(transparentzone_width/translayerswidth)
var translayersleftpos=0
var translayersopacity=100
var translayersfactor=100/translayersmax
var translayerswidthall=translayersmax*translayerswidth
var allpicturewidth
var distancepictopic=0
var scrollerleft=0
var scrollertop=0
var pause=10
var step=1
var newstep=step
var clipleft,clipright,cliptop,clipbottom
var i_picture=0
var timer
var picturecontent=""
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0
var browserinfos=navigator.userAgent 
var opera=browserinfos.match(/Opera/)  

var preloadedimages=new Array()
for (i=0;i<picture.length;i++){
	preloadedimages[i]=new Image()
	preloadedimages[i].src=picture[i].imgurl
}

function init() {
	allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
	document.getElementById('picturediv').style.top=scrollertop+"px"
    document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth+"px"
	clipleft=0
	clipright=0
	cliptop=0
	clipbottom=scrollerheight
	document.getElementById('picturediv').style.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
	document.getElementById('picturediv').style.visibility="visible"
	scrollpicture()  
}

function scrollpicture() {
	if (parseInt(document.getElementById('picturediv').style.left)>=scrollerleft-allpicturewidth) {
		document.getElementById('picturediv').style.left=parseInt(document.getElementById('picturediv').style.left)-step+"px"
		clipright+=step
		if (clipright>scrollerwidth) {
			clipleft+=step
		}
		document.getElementById('picturediv').style.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"		
		var timer=setTimeout("scrollpicture()",pause)
	}
	else {
		resetposition()
	}
}

function onmsover() {
	step=0
}
function onmsout() {
	step=newstep
}

function resetposition() {
	allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
    document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth+"px"
	clipleft=0
	clipright=0
	document.getElementById('picturediv').style.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
    scrollpicture()
}

picturecontent=""
picturecontent+="<table cellpadding=2 cellspacing=0>"
picturecontent+="<tr>"
for (i=0;i<=picture.length-1;i++) {
	picturecontent+="<td>"
	picturecontent+="<a href=\""+picture[i].linkto+"\" onMouseOver=\"javascript:onmsover()\" onMouseOut=\"javascript:onmsout()\">"
	picturecontent+="<img src=\""+picture[i].imgurl+"\" border=0 class='imagestyle'></a>"
	picturecontent+="</td>"
}
picturecontent+="</tr>"
picturecontent+="<tr>"
for (i=0;i<=picture.length-1;i++) {
	picturecontent+="<td class='textstyle'>"
	picturecontent+=picture[i].comment
	picturecontent+="</td>"
}
picturecontent+="</tr>"
picturecontent+="</tr></table>"

if (ie || ns6) {
	document.write('<div class="boxstyle" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow-x:hidden">')
	document.write('<div id="picturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden;overflow-x:hidden;">'+picturecontent

+'</div>')
	if (ie) {
		for (i=0;i<=translayersmax;i++) {
		document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight

+'px;background-color:'+transparentzone_color+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity-=translayersfactor
		}
		translayersleftpos=scrollerwidth-translayersleftpos
		for (ii=0;ii<=translayersmax;ii++) {
		document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight

+'px;background-color:'+transparentzone_color+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity+=translayersfactor
		}
	}
	if (ns6) {
		for (i=0;i<=translayersmax-1;i++) {
		document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight

+'px;background-color:'+transparentzone_color+';opacity:'+translayersopacity/100+';overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity-=translayersfactor
		if (translayersopacity<0) {translayersopacity=0.001}
		}
		translayersleftpos=scrollerwidth-translayersleftpos
		translayersopacity=0.001
		for (i=0;i<=translayersmax-1;i++) {
		document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth

+'px;height:'+scrollerheight+'px;background-color:'+transparentzone_color+';opacity:'+translayersopacity/100+';"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity+=translayersfactor
		}
	}
	document.write('</div>')
	document.write('<div id="emptypicturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')

	window.onload=init
}
// -->
</script>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Devi settere le misure delle immagini che siano un compromesso tra il desktop e il mobile!
Le misure le devi settare nelle righe:
var scrollerwidth=
e
var scrollerheight=
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
.....però sempre con homepage allargata come prima......
Non ho capito cosa intendi!

Per le dimensioni sul desktop, se sono un po' ridotte ti devi accontentare, o devi scegliere se vedere bene l'uno o l'altro, purtroppo con quello script non altro da fare.

L'alternativa è fare due versioni della pagina una per il PC e una per il mobile!
 

arapecoston

Utente Attivo
8 Giu 2013
60
0
0
se cambiassi script? fammi un esempio per favore, non pretendo che tu me lo faccia ma se mi dai una base poi mi arrangio da solo. a me serve far scorrere delle immagini linkabili e che abbiano un titolo (nome).
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Il fatto è che quando si tratta di javascrispt con delle dimensioni fisse il problema è sempre lo stesso anche se cambi script.

Fai una prova! nello script che usi ora, nelle righe che ti ho indicato, prova a mettere invece delle dimensioni fisse, la dimensione 100%, con questo se non peggiora dovrebbe adattarsi allo schermo che usi. È solo una prova ma potrebbe funzionare
 
Discussioni simili
Autore Titolo Forum Risposte Data
I [CSS3]Problema slideshow multiple HTML e CSS 2
G problema caricamento condizionale slideshow FlexSlider Javascript 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 0
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1

Discussioni simili