ART365

_week : 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Week #8


DESIGN FOR THE WWW
ART 365
fall 2018


webpage: ryanSmithArt.com/courses/fall2018/art365







Talk about: "project_b"

examples:
- Beatriz Martin Vidal
- Alex Grey
- "Loish"
- Feng Zhu




Class work:


Rollover images?



 

.gif animations?





basic JavaScript


download my images if you want : images.zip


PHOTO

* Slide Show #1



<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/4.jpg"

</script>



Image Src:
<img src="images/1.jpg" width="550" height="415" id="slide">

AND more JavaScript:

<script type="text/javascript">
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<3)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>




What's jQuery?



Lightbox

http://lokeshdhakar.com/projects/lightbox2/

Things you need:

css: ( put this in your <head> )
<link href="css/lightbox.css" rel="stylesheet">

js: ( put this above your "closing" </body> tag! )
<script src="js/lightbox-plus-jquery.min.js"></script>

images:
<a href="images/1.jpg" data-lightbox="snoopy" data-title="Ocean Pines">><img src="images/01.JPG"></a>
&
<a href="images/2.jpg" data-lightbox="snoopy" data-title="Image #2"><img src="images/02.JPG"></a>

PHOTO PHOTO PHOTO PHOTO

OR :
<a href="images/cat3.jpg" data-lightbox="roadtrip" data-title="cat#3">
<img src="images/thumbs/cat03.jpg" width="75" height="75" alt="cat">
</a>


homework


this week:


"project_b"

Finished Project due:

Oct. 23, 2018
(tuesday)