在我的网站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交换吗?