Категории:

  • Программирование


  • Изобразительное искусство


  • Программирование встраиваемых систем


  • Компьютерная графика


  • WEB Разработка


  • Музыка


  • Инженерия


  • iVARIOUS


  • Mobil App


  • JavaScript. Создание простой Галереи изображений

    Пример кода для отображения галереи. В данном примере не используется JQuery или другие подобные библиотеки. Только чистый JavaScript.
    С HTML все понятно. Есть страница выводящая гипертекст изображений, первоначально на странице только один div id='gallery' . CSS отображает стиль страницы как высше упомянутого div id='gallery' так и другие блоки div которых нет, но будут созданы уже самим кодом JavaScript. Более детально описание работы кода галереи будет рассмотрено в следующей статье.
    Стартовая страница галереи. HTML:

    <html>
    <html>
    <head>
    <link rel='stylesheet' href='gallery.css' type='text/css' media='screen'>
    <script type='text/javascript' src='galaryjs.js'></script>
    </head>
    <body>

    <div id='galary'>
    <img src='1.jpg' onClick='img_up(src)' >
    <img src='2.jpg' onClick='img_up(src)' >
    <img src='3.jpg' onClick='img_up(src)'>
    <img src='4.jpg' onClick='img_up(src)' >
    <img src='5.jpg' onClick='img_up(src)' >
    <img src='6.jpg' onClick='img_up(src)'>
    <img src='7.jpg' onClick='img_up(src)' >
    <img src='8.jpg' onClick='img_up(src)' >
    <img src='9.jpg' onClick='img_up(src)'>

    </div>

    </body>
    </html>


    Файл CSS который описывает отображение главного окна страницы, и других элементов которые только в будущем будут созданы программой.


    #div_all_id{
    width: 100%;
    height: 100%;
    position: fixed;
    background: black;
    opacity: 0.4;
    }

    #div_image{


    background: black;

    }
    #div_image img{
    position: absolute;
    margin-left: 10%;
    border: 20px solid black;
    border-radius: 30px;
    border-bottom: 50px solid #101018;
    width: 75%;
    }

    #gallery{
    background: black;
    position: absolute;

    }
    #gallery img{
    align-content: center;
    height: 230px;


    }
    #div_bt {
    position: fixed;
    }
    #div_bt img{
    margin-left: 2%;
    }

    #st_back {
    margin-top: 5%;
    position: fixed;

    }
    #st_back:hover {

    background: gray;
    border: 2px solid white;
    border-radius: 3px;
    opacity: 0.7;
    }


    #st_next {
    margin-top: 10%;
    position: fixed;

    }
    #st_next:hover {

    background: gray;
    border: 2px solid white;
    border-radius: 3px;
    opacity: 0.7;
    }


    #st_dwnld {
    margin-top: 15%;
    position: fixed;

    }
    #st_dwnld:hover {

    background: gray;
    border: 2px solid white;
    border-radius: 3px;
    opacity: 0.7;
    }


    #st_close {
    margin-top: 20%;
    position: fixed;

    }
    #st_close:hover {

    background: red;
    border: 2px solid white;
    border-radius: 3px;
    opacity: 0.7;
    } opacity: 0.7;

    Код Javascript управляющий логикой галереи:



    var id_img=0; //number images
    var ln_img=0;
    var img_path=0;
    function img_up(img_src){

    var elem=document.getElementById("galary");
    var elems=elem.getElementsByTagName('img');
    id_img=search_img(img_src,elems);
    ln_img=elems.length;

    varаdiv_allа=аdocument.createElement('div');
    div_all.id="div_all_id";
    document.body.appendChild(div_all);

    varаdiv_txа=аdocument.createElement('div');
    div_tx.id="div_image";
    document.body.appendChild(div_tx);
    img_path=document.images[id_img].src;
    div_tx.innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";

    varаdiv_buttonа=аdocument.createElement('div');
    div_button.id="div_bt";
    document.body.appendChild(div_button);

    div_button.innerHTML="<img id='st_back' src='back.png' height='30' title='back' onclick='back()'>";

    div_button.innerHTML+="<img id='st_next' src='next.png' height='30' title='next' onclick='next()'>";

    div_button.innerHTML+="<img id='st_dwnld' src='dwnld.png' height='30' title='download' onclick='img_dwnld()' >";

    div_button.innerHTML+="<img id='st_close' src='close.png' height='30' title='close' onclick='img_cls()' >";

    }

    function img_cls(){
    var remel=document.getElementById("div_image");
    remel.parentNode.removeChild(remel);

    var rem_ove=document.getElementById("div_all_id");
    rem_ove.parentNode.removeChild(rem_ove);

    var rem_ove=document.getElementById("div_bt");
    rem_ove.parentNode.removeChild(rem_ove);
    }

    function search_img(img_src,elems){

    for(var i=0; i<elems.length; i++)
    if(document.images[i].src==img_src) {return i;}
    }

    function next(){
    id_img+=1;

    if(id_img<=ln_img)
    {
    document.getElementById("div_image").innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";}
    else id_img=(ln_img-2);
    img_path=document.images[id_img].src;
    }

    function back(){
    id_img-=1;
    if(id_img>=0)
    {
    document.getElementById("div_image").innerHTML="<img src="+" ' "+document.images[id_img].src+" ' >";}
    else id_img=0;
    img_path=document.images[id_img].src;
    }
    function img_dwnld(){

    window.open(img_path);
    } ndow.open(img_path);


    Читайте больше в категории: WEB Разработка

    2016-06-27 21:29:59



    Другие статьи:

    STM32. Код работы таймера Basic TIM 6

    WinAPI. HDC .

    Java. Создание графических приложений

    WEB Разработка

    WinAPI. Фон для вывода Графиков функций.

    Maya. bend, sine, squash, twist, wave, flare.

    PHP. Введение

    STM32. Передача данных по USART

    Maya. Split, Extrude, Merge

    JavaScript. Создание простой Галереи изображений