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.362
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.362
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.362
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
Z Problema con il mio tp-l i nk Reti LAN e Wireless 0
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
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 0
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 4
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
H problema carrello woocommerce PHP 2
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
M Problema su query JOIN in tre tabelle PHP 0
S Problema esportazione tabelle Mysql in Excel PHP 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
M Problema su update di 3 tabelle PHP 1
T problema con select dinamica con jquery Javascript 0
A Problema checkout carrello php PHP 2
R Problema al server Domini 0
A Problema nel passare la variabile PHP 0
G Problema update di un database PHP 0
S Problema con spazi bianchi HTML e CSS 4
E Problema motore di ricerca FULL_TEXT PHP 0
Tommy03 Problema durata cookie PHP 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
I PROBLEMA CODICE INSERTION SORT C C/C++ 2
I PROBLEMA CODICE C - INSERTION SORT Presentati al Forum 1
N Problema pennelli Photoshop Photoshop 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
Y Problema visualizzazione PDF generato da fpdf PHP 1

Discussioni simili