working on site darrenbachan.com, when click project, how img works in desktop/laptop when mobile doesn't work. either skip trying fit projects in devices , have screenshots or swap images make them better on mobile.
my friend helped me set javascript:
var projects = { 'project_1' : { 'title' : 'edutravel credit', 'description' : 'innovative travel credit. engage in learning through exploration , 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; }); }); with images being in javascript not sure how accomplish want. still possible have img swap once reaches mobile breakpoint?
Comments
Post a Comment