Категории:

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


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


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


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


  • 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



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

    Ужгородський Кафедральний Собор в 19 ст. ( 3D )

    Середнянський замок. 3D реконструкція

    PHP. $_COOKIE

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

    PHP. Типовые команды MySQL

    Психология: как рождается музыка.

    Maya. Сглаживание Smooth и по нормалям

    Java. Конструкторы и ключевое слово this

    JavaScript. Введение

    Java. Интерфейсы