Index Témakörök

Mobil vagy asztali képek.

Saját vagy céges képeink bemutatója mobil vagy asztali eszközön.

EWB

Teszteléshez nézzük meg ezt az oldalt, mobil és asztali eszközön is.

Bemutató képek száma =
Utolsó képet követően, bemutató ismét az elejétől kezdődik.

Saját vagy céges képek, fotók méretét, mindenki tetszésének megfelelően állíthatja be.
Annyi képet helyezhetünk el mobilra és asztalira, amennyire szükségünk van.

Aktuális kép száma = 1

1. kép 1. kép 2. kép 2. kép 3. kép 3. kép 4. kép 4. kép 5. kép 5. kép



Asztali képek mérete:
width="400" height="300"

Mobil képek mérete:
width="800" height="600"

Képek, mikor melyik képmérettel jelennek meg, a program dönti el.

FM width:px; height:px;

FB width:px; height:px;





Tetszőleges számú képet helyezhetünk el html oldalon, mobilra és asztalira is, a
<div id="diakepek"> elem területén.
A CSS és JS fájlt, nem kell módosítani, több vagy kevesebb kép elhelyezése esetén sem.

Bemutatóképek azonosítója:
Mobilra ---- class="bmkepm"
Asztalira --- class="bmkepa"


html fájl tartalma.

<head>
<title>Képek bemutatója mobilon vagy asztalin.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<link href="diastilus.css" rel="stylesheet" type="text/css" />
</head>
<body id="bodi">
<div id="container">
<p>Bemutató képek száma = <span id="kepekszama"></span></p>
<h2>Aktuális kép száma = <span id="aktualiskepszam">1</span> </h2>
<div id="tovabbikepek"><span id="kepnezet"></span></div>

<div id="diakepek">
<img class="bmkepa"  src="diakepek/kep1.jpg"  alt="1a. kép"  width="400"  height="300"/>
<img class="bmkepm"  src="diakepek/kep1m.jpg" alt="1m. kép"  width="800"  height="600"/>
<img class="bmkepa"  src="diakepek/kep2.jpg"  alt="2a. kép"  width="400"  height="300"/>
<img class="bmkepm"  src="diakepek/kep2m.jpg" alt="2m. kép"  width="800"  height="600"/>
<img class="bmkepa"  src="diakepek/kep3.jpg"  alt="3a. kép"  width="400"  height="300"/>
<img class="bmkepm"  src="diakepek/kep3m.jpg" alt="3m. kép"  width="800"  height="600"/>
<img class="bmkepa"  src="diakepek/kep4.jpg"  alt="4a. kép"  width="400"  height="300"/>
<img class="bmkepm"  src="diakepek/kep4m.jpg" alt="4m. kép"  width="800"  height="600"/>
<img class="bmkepa"  src="diakepek/kep5.jpg"  alt="5a. kép"  width="400"  height="300"/>
<img class="bmkepm"  src="diakepek/kep5m.jpg" alt="5m. kép"  width="800"  height="600"/>
</div>

<script type="text/javascript" src="dia.js"></script>
</div>
</body>
</html>

diastilus.css fájl tartalma.

body{font-family: Arial, Helvetica, sans-serif; font-size:100%; margin:0; background-color: #ccc;}
#container{width:850px; margin-top:10px; margin-right:auto; margin-left:auto; padding-left:10px;}
#diakepek{display: none;}
#tovabbikepek{
         text-align:center; 
         min-height: 310px; padding-top: 5px; padding-bottom:5px; 
         border:2px solid white;
       }

dia.js fájl tartalma.

$(document).ready(function(){

// Felhasználó monitorjának méretei. -------------------------------------------------
var Mszelesseg= screen.availWidth;      // Eszköz szélesség.
// ----------------------------------------------------------------------------------------------
// body offsetWidth.
var monitor_sz = document.getElementById("bodi");
bodiszelessege=(monitor_sz.offsetWidth);
// ----------------------------------------------------------------------------------------------	

var AkepTomb=$(".bmkepa");		// Asztali - képek begyűjtése.
var MkepTomb=$(".bmkepm");		// Mobil --- képek begyűjtése.
// ----------------------------------------------------------------------------------------------

var Akepekszama=AkepTomb.length;   // Asztali. Tömb elemeinek száma, melyek a képeket tárolják.
var Mkepekszama=MkepTomb.length;   // Mobil.   Tömb elemeinek száma, melyek a képeket tárolják.
// ----------------------------------------------------------------------------------------------

// Eszköz Vizszíntes méretének meghatározása.
              // 1052px-nél kisebb, akkor Mobil, ha nagyobb, akkor Asztali.
var EVmeret=1052;  // Mobil vagy Asztali. Az itt meghatározott, width érték határozza meg.

// Oldal betöltődésekor, első kép megjelenítése, és képek számának kiíratása.
if(Mszelesseg<EVmeret){  var LathatoKep=MkepTomb[0];
        $("#kepnezet").html(LathatoKep);     // Mobil képek közül, az első kép megjelenítése.
        $("#kepekszama").html(Mkepekszama);  // Mobil képek számának, kiíratása. Ez, nem fontos.
       }
   else{ var LathatoKep=AkepTomb[0];
        $("#kepnezet").html(LathatoKep);     // Asztali képek közül, az első kép megjelenítése.
        $("#kepekszama").html(Akepekszama);  // Asztali képek számának, kiíratása. Ez, nem fontos.
       }
// ---------------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------------

// Kiválasztott területen történő kattintások figyelése, és függvény meghívása.  
 $("#tovabbikepek").click(function() {
      if(Mszelesseg<EVmeret){MobilUjkezdes();}
       else{AsztaliUjkezdes();}
   });
// --------------------------------------------------------------------------------------------  
var aktksz=1;  // Aktuális kép számának meghatározása, azért 1; mert a 0-ik képet már meghívtuk.
// --------------------------------------------------------------------------------------------

function MobilUjkezdes(){
var LathatoKep=MkepTomb[aktksz];           // Mobil képek beolvasása.
   $("#kepnezet").html(LathatoKep);        // Beolvasott Mobil kép, megjelenítése.
    aktksz++;                              // Aktuális kép számának növelés egy egységgel.
   $("#aktualiskepszam").html(aktksz);     // Aktuális kép számának, kiíratása.  Ez, nem fontos.
    if(aktksz == Mkepekszama){aktksz=0;}   // Beolvasott minden képet, kezdje ismét az elsőtől.
}

// --------------------------------------------------------------------------------------------

function AsztaliUjkezdes(){
var LathatoKep=AkepTomb[aktksz];           // Asztali képek beolvasása.
   $("#kepnezet").html(LathatoKep);        // Beolvasott Asztali kép, megjelenítése.
    aktksz++;                              // Aktuális kép számának növelés egy egységgel.
   $("#aktualiskepszam").html(aktksz);     // Aktuális kép számának, kiíratása.  Ez, nem fontos.
    if(aktksz == Akepekszama){aktksz=0;}   // Beolvasott minden képet, kezdje ismét az elsőtől.
}

});