Kuva-gallerioita ja lisää kikkoja

1. Galleria (JavaSript & JQuery & CSS)

Kuvien vaihtaminen tapahtuu tekstistä, joten tekstien olisi kuvailtava kuvan sisältöä.


Kuva 1 Kuva 2 Kuva 3 Kuva 4




Galleria 1, koodaukset:


   HTML-koodaus:
   
   <div id="cf7" class="shadow">
    <img class='opaque' src="Galleria1/perho1.jpg" />
    <img src="Galleria1/perho2.jpg" />
    <img src="Galleria1/perho3.jpg" />
    <img src="Galleria1/perho4.jpg" />
   </div><br>
   <p id="cf7_controls">
    <span class="selected">Kuva 1</span>
    <span>Kuva 2</span>
    <span>Kuva 3</span>
    <span>Kuva 4</span>
   </p>

   Script:it (sijoita head-elementtiin):
   
   <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
   <script>
    $(document).ready(function() {
      $("#cf7_controls").on('click', 'span', function() {
        $("#cf7 img").removeClass("opaque");

        var newImage = $(this).index();

        $("#cf7 img").eq(newImage).addClass("opaque");

        $("#cf7_controls span").removeClass("selected");   
        $(this).addClass("selected");
      });
    });
   </script>

   CSS-ohjeet (sijoita erilliseen .css -tiedostoon):

   p#cf7_controls {
    text-align:left;
   }
   #cf7_controls span {
    padding-right:2em;
    cursor:pointer;
   }
   #cf7 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto 10px;
    margin:10px;
   }
   #cf7 img {
    position:absolute;
    width:90%;  
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
   }
   #cf7 img.opaque {
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=1);
   }

Esimerkin 1 CSS-ohjeet



2. Painikeilla auki ja kiinni (JQuery)

Painikkeilla voi avata ja sulkea teksti-laatikon text()-funktion avulla.


Esimerkki 2. Tarvittavat koodaukset.


  Script.it (head-elementtiin):
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
   $(document).ready(function(){
    $("#btn1").click(function(){
     $("#box").animate({width: "90%"});
     $("#box").animate({height: "200px"});
	 $("p").show().text("Tähän voi kirjoittaa oikeasti tekstiä.");
    });
    $("#btn2").click(function(){
     $("#box").animate({width: "0px"});
     $("#box").animate({height: "0px"});
    });
   });
  </script>
  
  CSS-ohje:
  
  .keskelle{
    text-align:center;
  }
  
  HTML-koodaus:
  
  <button id="btn1">Avaa</button>
  <button id="btn2">Sulje</button>

  <div id="box" style="background:#6A5ACD;color:white;
                       height:100px;width:0px;margin:6px;">
   <p id="box" class="keskelle">  </p>
  </div>

Jos edelliseen esimerkkiin haluaisi tuottaa HTML-koodausta, tekstiä tai ehkä kuvan, toteutus tehdään html()-funktion avulla.
Koodaus-esimerkissä vain muutamat tarvittavat muutokset.


  Script:iin muutos:
 
  $("#box").show().html("<h3>Tässä olisi otsikko</h3><p>Tekstiä voi kirjoittaa,<br>rivinvaihtokin.</p>");
  
  Muutettava HTML-koodauksen osa:
  
  <h4 id="btn1">Avaa</h4>
  <h4 id="btn2">Sulje</h4>

3. Sisältö-div avaaminen ja sulkeminen painikkeilla (JQuery)

Aluksi raaka-versio ilman hienouksia ja erikoisempaa sisältöä.

Tänne näytettävät asiat. Mahdollisesti voi näyttää kuvia, videoita yms sisältöäkin. (kokeillaan näitä temppuja seuraavaksi)

Esimerkki 3. Koodaaminen:


  CSS-ohjeet:
  
  .omaPoksi{ 
	margin:10px;
	padding:12px; 
    border:1px solid #e60073;
    background:#6A5ACD;
    color:white;  		   
	width:40%; 
	height:100px;
  }  
  
  HTML-koodaus:
  
  <div class ="omaPoksi">
       Tänne näytettävät asiat. Mahdollisesti voi näyttää kuvia, 
	   videoita yms sisältöäkin. (kokeillaan näitä temppuja seuraavaksi)
  </div>

  <input id = "sulje" type = "button" value = "Sulje" />   
  <input id = "avaa" type = "button" value = "Näytä" />
  
  JavaScript-koodaus:
  
  <script type = "text/javascript" 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
		
  <script type = "text/javascript" language = "javascript">
    $(document).ready(function() {
	  $("#avaa").click(function () {
        $(".omaPoksi").show( 1000 );
      });
      $("#sulje").click(function () {
        $(".omaPoksi").hide( 1000 );
      });			
    });
  </script>

4. Tekstistä aukeava info-ruutu

Esimerkki 3 jota kehitty pidemmälle CSS-muotoiluilla.
Huomaa ! Tässä esimerkissä on erilaiset id-tunnisteet Sccriptissä ja html-elementeissä sekä muotoiluohjeet on erilaiset.

Maybach

Maybach on niitä parempia Mersuja. Huomaa että tässä ei näy rvinvaihtoa.

Maybach on oma automerkki.
Tässä on rivinvaihtoja !

Tekstiin voidaan liittää myös Googlen fonttityyppikin:

Maybach

Sulje Näytä

4. esimerkin toteutus, kuvat sijoitettu esimerkissä Galleria1-kansioon:


  CSS-ohjeet:
  
  .omaPoksi2{ 
	margin:10px;
	padding:12px; 
    border:1px solid RGB(155,182,225);
    background-color:RGB(26,40,77);
    color:white;  		   
	width:75%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
  }
  .panel {
    display: none;
  }
  .fotot{
    width: 50%;
	float: left;
	margin: 20px;
  }
  .clearfix {
    overflow: auto;
  }
  .painike_teksti{
    font-family: 'Permanent Marker', cursive;
	font-size:110%;
	color: RGB(26,40,77);
	margin:10px;  
  }
  .painike_teksti:hover{
	color: rgb(115,12,78);
    font-size:120%;
  }
  .esimerkki_teksti{
    font-family: 'Satisfy', cursive;
	font-size: 150%;
  }
  
  Script-koodaukset ja fontti-linkit (head-elementtiin):

  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
  <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
		
  <script type = "text/javascript" language = "javascript">
    $(document).ready(function() {
	 $("#avaa2").click(function () {
      $(".omaPoksi2").show( 1000 );
     });
     $("#sulje2").click(function () {
      $(".omaPoksi2").hide( 1000 );
     });			
    });
  </script>
  
  HTML-koodaus:
  
  <div class="omaPoksi2 clearfix">
    <img class="fotot" src="Galleria1/maybach.jpg"/>  
	<h3>Maybach</h3>
	Maybach on niitä parempia Mersuja.
	Huomaa että tässä ei näy rvinvaihtoa.
    <p>Maybach on oma automerkki.<br> Tässä on rivinvaihtoja !
	<br><br>
    Tekstiin voidaan liittää myös Googlen fonttityyppikin:<p>
	<p class="esimerkki_teksti"> Maybach </p>
  </div>

  <span class="painike_teksti" id = "sulje2" /> Sulje </span>   
  <span class="painike_teksti" id = "avaa2" />  Näytä </span>

Huom !
Jos www-sivulla on useita samanlaisella toteutuksella aukeavia inforuuttuja, on jokaiselle annettava eri id-tunnisteet HTML-koodaukseen sekä kullekin oma JavaScript-koodaus ja koodauksiin id-tunnisteet.

Jos halutaan että info-laatikko on näkymättömissä sivulle tultaessa, kokeile näitä:


  Script-koodauksen muutos:
  <script type = "text/javascript" language = "javascript">
    $(document).ready(function() {
     $(function () {
      $(".omaPoksi2").hide(1);
     });	
     $("#sulje2").click(function () {
      $(".omaPoksi2").hide( 1000 );
     });	
	 $("#avaa2").click(function () {
      $(".omaPoksi2").show( 1000 );
     });
    });
  </script>
  
  Samalla voi HTML-koodausta muuttaa Avaa ja Sulje järjestyksen:
 
  <span class="painike_teksti" id = "avaa2" />  Näytä </span>
  <span class="painike_teksti" id = "sulje2" /> Sulje </span>
KESKEN TÄSSÄ KOHTAA

5. Kuvan vaihto tekstistä (JQuery)

Esimerkissä kuva vaihtuu tekstiä klikkaamalla. Esimerkin ongelma, eri korkuisten kuvien käyttäminen. Edellisessä 4. esimerkissä kuvatiedostot oli samankokoisia, leveys ja korkeus.
( Lyijykynäpiirros-kuvat: https://www.deviantart.com/ )

Tarvittava CSS-ohjeet, script:it ja HTML-koodaus:


  CSS-ohjeet:
  
  #feid2 {
    position:relative;
    /*height:281px;*/
    /*width:450px;*/
    /*margin:0 auto;*/
    width:30%;
    margin-bottom:390px;
    padding:15px;
  }
  #feid2 img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  #feid2 img.transparent {
    opacity:0;
  }
  #feid_onclick {
    cursor:pointer;
  }
  
  Script:it (head-elementtiin):
  
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    $("#feid_onclick").click(function() {
    $("#feid2 img.top").toggleClass("transparent");
    });
   });
  </script>
  
  HTML-koodaus:
  
  <p id="feid_onclick"><b style="color:red"> Klikkaa mua </b></p>
  <div id="feid2" class="shadow">
   <img class="bottom" src="Galleria1/bono2.jpg"/>
   <img class="top" src="Galleria1/brucew2.jpg"" />
  </div>

6. Galleria, kuvan vaihto 4 sekunnin välein (JQuery)

Esimerkissä kuvat vauhtuu 400 millisekunnin eli 4 sekunnin välein. CSS-ohjeissa on huomioitu eri korkuisten kuvien aiheuttama ongelma margin-bottom-asetuksessa sekä käyttämällä kahden korkuisia kuvia.
( Lyijykynäpiirros-kuvat: https://www.deviantart.com/ )

Tarvittava CSS-ohjeet, script:it ja HTML-koodaus:


  CSS-ohjeet:
  
  #kuvat { position: relative;
         margin-bottom:560px;
         padding:15px; }
  #kuvat > img { position: absolute; left: 0; top: 0; display: none; }
  #kuvat > img:first-child { display: block; }
  
  Script:it (head-elementtiin):
  
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
     var
      images = "#kuvat > img" // kuva valitsin
      , interval = 4000           // siirtymä-aika millisekunteina
      , index = 0                 // alku-arvo
      , count = $(images).length  // kuvalaskuri
      // the transition loop
      , handle = setInterval(function() {
       // fade out the current image
       $(images + ":eq(" + index + ")").fadeOut('slow');
       // get the next index, or cycle back to 0
       if (++index === count) index = 0;
         // fade in the next image
         $(images + ":eq(" + index + ")").fadeIn('slow');
        }
        , interval
       )
       , stop = function(){
            clearInterval(handle);
       };
     });
    </script>
  
  HTML-koodaus:
  
  <div id="kuvat">
    <img src="Galleria1/hurt.jpg"/>
    <img src="Galleria1/collum.jpg">
    <img src="Galleria1/bono1.jpg">
    <img src="Galleria1/brucew.jpg"> 
    <img src="Galleria1/rock1.jpg">	  
  </div>

7. Painike avaa laatikon (JQuery)

Esimerkissä leveä painike avaa alle laatikon jossa kuva ja kuvaan liittyvää tekstiä.

Tarvittava CSS-ohjeet, script:it ja HTML-koodaus:


  CSS-ohjeet:
  
   #avaa {
    padding: 10px;
    text-align: center;
    background-color: #cceeff;
    border: solid 1px RGB(155,182,225);
	font-family: Arial, Helvetica, sans-serif;
	width: 75%;
   }
   #panel{
    padding: 10px;
    background-color: RGB(147,174,221);
    border: solid 1px #c3c3c3;
	font-family: Arial, Helvetica, sans-serif;
	width: 75%;
   }
   #panel {
    display: none;
   }
   img{
    width: 50%;
	float: left;
	margin: 20px;
   }
   .clearfix {
    overflow: auto;
   }
   .teksti{
    padding: 20px;
   }
  
  Tarvittavat script:it (head-elementtiin):
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script> 
   $(document).ready(function(){
    $("#avaa").click(function(){
     $("#panel").slideToggle("slow");
    });
   });
  </script>
  
  HTML-koodaus:
  
  <div id="avaa"> Maybach luxery car </div>
  <div id="panel" class="clearfix">
   <img src="Galleria1/maybach.jpg"/>
   <p class="teksti2">
   "The Vision Mercedes-Maybach 6 Cabriolet takes modern luxury into the realms of the ultimate in luxury, 
   and is the perfect embodiment of our design strategy. Breathtaking proportions combined with a luxurious 
   haute couture interior help to create the ultimate experience,” explains Gorden Wagener, Chief Design 
   Officer of Daimler AG. Measuring almost six metres in length, the Vision Mercedes-Maybach 6 Cabriolet 
   incorporates the classic proportions of art deco design with its extremely long bonnet and puristic, 
   flowing lines, and at the same time completely reinterprets these aesthetic principles.<p>
  </div>

8. Kuvien sulkeminen viiveellä (JQuery)

"Klikkaa mua"-painike sulkee kuvat JQuery:n fadeOut()-funktioilla.
Vastaavasti fadeIn()-funktioilla voi avata kuvat ja käyttämällä fadeToggle()-funktiota voi avata ja sulkea kuvat samaa tekstiä h4-klikkaamalla.
Tämä ratkaisu-malli on ongelmallinen, koska kuvien alapuolella voi olla html-sisältöä jonka asemointiin www-sivulla kuvat vaikuttavat.

Tarvittava CSS-ohjeet, script:it ja HTML-koodaus:


  CSS-ohjeet:
  
   Tulossa myöhemmin....
  
  Script:it (head-elementtiin):
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
   $(document).ready(function(){
    $("h4").click(function(){
     $("#div1").fadeOut(2000);
     $("#div2").fadeOut(4000);
     $("#div3").fadeOut(6000);
    });
   });
  </script>
  
  HTML-koodaus:
  
  <h4> Klikkaapa mua </h4><br><br>

  <img id="div1" src="Galleria1/maisema1.jpg"/><br>
  <img id="div2" src="Galleria1/maisema2.jpg"/><br>
  <img id="div3" src="Galleria1/maisema3.jpg"/>

Design and edit player