Avatar
David Hynek
Redaktor
Avatar
David Hynek:

Někde dělám chybu a faktu už nevím kde...

Mám HTML stránku:

<div class="clanek">
       <img class="imgclanek" src="obrazek.jpg" title="popis" />
        <p>text... atd</p>
  </div>

Těch článků je tam x a já bych rád, obalil tag img divem pro vytvoření efektu. Ale ať to zkouším appendChild nebo insertBefore, nejde mi to zacílit přesně kolem těch tagů. Jak se správně v DOMu obaluje prvek?

Ten efekt je "transition: background-size 1s ease-in;" a ten funguje jen na pozadí, tedy musím obrázek nejdříve obalit divem, tomu předat hodnotu pozadí stejné jako je cesta k obrázku. Když ho tam natvrdo přidám div, tak to funguje, ale rád bych to zkusil celé přes javascript. Díky za nasměrování... :)

Odpovědět 23.7.2015 19:11
Čím víc vím, tím víc věcí nevím.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na David Hynek
Honza Bittner:

Toto (jQuery) by tě mohlo navést http://www.itnetwork.cz/…adani-obsahu

Co máš v HTML při načtení, ten element .clanek (pak chceš vložení do), nebo obrázek a odstavec (pak chceš obalování - wrap)?

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 23.7.2015 19:16
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Hynek
Redaktor
Avatar
David Hynek:

Honzo, děkuji za nasměrování, jQuery moc nemusím. Rád zjišťuji jak to funguje čistě v JavaScriptu. Wrap byl dobrý směr. Přikládám co jsem chtěl vytvořit a co se tedy i nakonec povedlo. Třebas se to bude hodit i někomu z vás.

Je to hodně zjednodušené, ale k ukázce to stačí :)

A ještě živá ukázka http://davidhynek.cz/test5.html :)

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
  <title></title>
  <style>
  .clanek {float: left; width: 51%; margin: 20px auto; clear: both;}
  .clanek p {}
  .divimgclanek {display: block; float: right;  background-size:100%; margin: 20px; transition: background-size 1s ease-in; -moz-transition: background-size 1s ease-in; -web-kit-transition: background-size 1s ease-in; background-position: 20% 20%;}
  .divimgclanek:hover {background-size:110%; background-position: 20% 20%;}
  </style>
  <script language="javascript">

  window.onload = function() { zabal_obrazky("imgclanek","divimgclanek");}


  function zabal_obrazky(co, cim)
  {
  x = document.getElementsByClassName(co);
  if(x.length > 0)
  {
  for(i=0;i<x.length;i++)
    {
    newDiv = document.createElement("div");
    newDiv.className = cim;
    newDiv.appendChild(x[i].parentNode.replaceChild(newDiv,x[i]));
    document.getElementsByClassName(cim)[i].style = "background-image: url('"+x[i].src+"'); width: "+x[i].offsetWidth+"px; height: "+x[i].offsetHeight+"px;";
    x[i].style = "display: none;";
    }
  }}

  </script>
  </head>
  <body>
  <div id="telo">
     <div class="clanek">
        <img class="imgclanek" src="http://www.ditom.cz/cenik/img/obr_3.jpg" title="Hala" />
        <p>Lákamí vůněhulás úmyval rohlivý jednovod lek štínkucen úmyslušle alesmělý tomáš prozzásko. Autný řícit přiroje aloben Tanechřeh čin rostrojsk znou hlínka onověď vá. Aložek lžičkak vůně schvám podlo Rohlíkem dráda čin parcipádn A autobzor. Vátomálož ček jakočil sudbale Umraburdí maráva dráček Hráčepicí ček zlek máš. Obse V větrhnova.</p>
     </div>
     <div class="clanek">
        <img class="imgclanek" src="http://www.ditom.cz/cenik/img/obr_1.jpg" title="Regál" />
        <p>Lákamí vůněhulás úmyval rohlivý jednovod lek štínkucen úmyslušle alesmělý tomáš prozzásko. Autný řícit přiroje aloben Tanechřeh čin rostrojsk znou hlínka onověď vá. Aložek lžičkak vůně schvám podlo Rohlíkem dráda čin parcipádn A autobzor. Vátomálož ček jakočil sudbale Umraburdí maráva dráček Hráčepicí ček zlek máš. Obse V větrhnova.</p>
     </div>
  </div>
  </body>
</html>
Nahoru Odpovědět 23.7.2015 21:35
Čím víc vím, tím víc věcí nevím.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.