Trial but mostly errors

This is hard.

Made the mistake of complicating things for myself and thinking I could defeat gravity and fly rather than taking it easy. Clever me thought it would be a good idea to try and have the images in a grid gallery and the larger image would be in a popup and hopefully navigate from there. Managed to get a popup functioning but couldn’t for the life of me figure out how to turn it into a functioning slideshow, auto or manual. The only solutions were plugins or jQuery galleries like magnific popup.

The first popup I tried doing was the jquery mobile on w3schools but found that it had everything set out and finished and just wasn’t quite right so I started all over. Below is a snapshot of the javascript files it attached, that were full of  an endless bulk of codes that I’m pretty sure we can’t use, so scraped that approach to popups even though it was functional.

Screen Shot 2015-08-29 at 3.31.13 PM

Before finding the approach I actually wanted with popups I looked into parent windows as a way to enlargen the image in the same window  but found it was basically a new smaller tab and wasn’t what I wanted which is demonstrated in my third mockup. Again the window parent/child did work but seemed like a lot of work since I would have to have two to three httml, css and js files. Eventually found a way to successfully open a pop up with a background opacity effect that allowed me to navigate by clicking on the thumbnails to open a larger image.

Reference – (list of research points on various popup, parent-windows, text  and hover effects)

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image

http://webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/

http://www.html5templatesdreamweaver.com/hover-effects.html

http://www.plus2net.com/javascript_tutorial/window-parent.php

http://cssdemos.tupence.co.uk/image-popup.htm

http://codecanyon.net/item/css3-image-hover-effects/471215?WT.ac=search_thumb&WT.seg_1=search_thumb&WT.z_author=Pixelworkshop?ref=WA6

http://web.enavu.com/tutorials/making-image-overlay-caption-using-css/

https://css-tricks.com/design-considerations-text-images/

http://snook.ca/archives/html_and_css/content_overlay_css

http://stackoverflow.com/questions/1183633/can-you-overlay-a-transparent-div-on-an-image

http://maketea.co.uk/2013/12/16/smooth-text-overlays-with-css-transforms.html

http://stackoverflow.com/questions/471510/hide-text-using-css

http://www.hongkiat.com/blog/free-responsive-image-gallery/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s