如何使用媒体查询和js交换图像

时间:2015-09-25 23:23:16

标签: javascript jquery html css media-queries

在我的网站darrenbachan.com上工作,当我点击一个项目时,我喜欢img在桌面/笔记本电脑中的工作方式,但是当我进入移动设备时,它并没有真正起作用。我要么跳过尝试让我的项目适合设备,只是有截图或我交换图像,使它们在移动设备上看起来更好。

我的朋友帮我设置了javascript:

var projects = {

        'project_1' : {
            'title' : 'EduTravel For Credit',
            'description' : 'Innovative travel for credit. Completely engage in your learning through exploration and discovery.',
            'images': [
                '/images/placeholder-1.gif',
                '/images/placeholder-2.gif',
                '/images/placeholder-3.gif',
                '/images/placeholder-4.gif',
                '/images/placeholder-5.gif'
            ],
            'more': 'even more'
        },

        'project_2' : {
            'title' : 'S-Trip!',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/s-trip/s-trip-1.jpg',
                '/images/s-trip/s-trip-1.jpg',
                '/images/s-trip/s-trip-1.jpg',
                '/images/s-trip/s-trip-1.jpg',
                '/images/s-trip/s-trip-1.jpg'
            ],
            'more': 'even more'
        },

        'project_3' : {
            'title' : 'Dayton 2 Daytona',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/placeholder-1.gif',
                '/images/placeholder-2.gif',
                '/images/placeholder-3.gif',
                '/images/placeholder-4.gif',
                '/images/placeholder-5.gif'
            ],
            'more': 'even more'
        },

        'project_4' : {
            'title' : 'Campus Vacations',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/placeholder-1.gif',
                '/images/placeholder-2.gif',
                '/images/placeholder-3.gif',
                '/images/placeholder-4.gif',
                '/images/placeholder-5.gif'
            ],
            'more': 'even more'
        },

        'project_5' : {
            'title' : 'Travel Wedding',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/placeholder-1.gif',
                '/images/placeholder-2.gif',
                '/images/placeholder-3.gif',
                '/images/placeholder-4.gif',
                '/images/placeholder-5.gif'
            ],
            'more': 'even more'
        },

        'project_6' : {
            'title' : 'Vibe Cancun',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/placeholder-1.gif',
                '/images/placeholder-2.gif',
                '/images/placeholder-3.gif',
                '/images/placeholder-4.gif',
                '/images/placeholder-5.gif'
            ],
            'more': 'even more'
        }

    }

    $('[data-type="projectLoader"]').click(function() { 

        var project = $(this).attr('data-project');

        var projectData = projects[project];

        $('#project-title').html(projectData.title);
        $('#project-description').html(projectData.description);
        $('#project-more').html(projectData.more);

        $('#project-images').empty('');

        $.each(projectData.images, function(item) { 
            $('#project-images').append('<div class="holder"><span class="image_holder" style="background-image:url('+projectData.images[item]+');"></span></div>')
        });

        $('article').removeClass('active');
        $(this).parents('article').addClass('active');

        $('body').toggleClass('projectLoaded');

        return false;

    });

    $('[data-type="projectDie"]').click(function() { 

        $('body').removeClass('projectLoaded');

        return false;

    });

    });

图片是javascript,我不知道如何完成我想要的。一旦到达移动断点,它仍然可以进行img交换吗?

0 个答案:

没有答案