Webb Food Services

From the to-do list: Dev

✔ complete project page carousels

Comments

Justin Bernard on August 18, 2015:

make images dim on scroll, make images correctly set img height to area container height

Justin Bernard on August 19, 2015:

yo, hit this for me

this one has been done:
http://client.fleeangrybear.com/webb/goldrush/project_detail_1_ucsd.html

need to apply same header carousel to other images

few changes

one, you'll notice i changed up the header class a tad

<header class="projects projects_met_state"> (notice on met state, i'm calling the class .projects , and .projects_met_state

thats because i used to be assigning those header images in the css

notice on the complete one, 1_ucsd, its updated to:
<header class="projects_detail">

that way they all have same header, just the content inside is diff, via html, that way client can update it via cms later on

then, after nav_container, you add the slider module, which looks like this

<div id="project_slider">
<div id="slider_arrow_left"><a href="#">Left</a></div> <div id="slider_arrow_right"><a href="#">Right</a></div>
<div id="slider_strip_wrapper"> <ul id="slider_strip" class="clearfix"> <li><img src="./img/caro/ucsd_header_img_0.jpg" /></li> <li><img src="./img/caro/ucsd_header_img_1.jpg" /></li> <li><img src="./img/caro/ucsd_header_img_2.jpg" /></li> <li><img src="./img/caro/ucsd_header_img_3.jpg" /></li> <li><img src="./img/caro/ucsd_header_img_4.jpg" /></li> <li><img src="./img/caro/ucsd_header_img_5.jpg" /></li> </ul> </div>
</div>

so you should be able to just change the header names, then input the slider module. then run through all 9 projects and update hte images to the ones you did yesterday that were like 516 high

also, i think i may have done the images to set width in css.  dont worry about that, don't crop image width or anything,

as is now, the height and width on each li is fixed i think to 600px, we need to set that to like auto or something, so we can have diff width images in 

.  i'll need to make some tweaks to the slider js later to, because right now it moves it left/right a set amount with click, ill need to make it scroll based on image width.

Taylor Bernard on August 19, 2015:

did you change all the names of my images i did yesterday?

i had them named this format:

slider_asuwest_1

looks like some header images in there like this:

project_view_header_ASUWest_2

is this what you renamed them?

when i pull off server shows all the timestamps @ time i pull them down. so cant go off that.

Taylor Bernard on August 19, 2015:

updated /goldrush with carousels.
looks like its not playing nice at mobile if you put width at 'auto'. it fills up the div correctly. but it doesnt scale the image really. so all you see is roof and stuff. i put 600px back in their on desktop and mobile width and that fixed it where it scales for mobile and desktop.