Jules McDEEeeeeeeee

FNL YR PRJCT

Category: Coding

Gallery Slideshows for JQuery Mobile

So Ive researched a few plugins. I have one working prototype but Im having trouble displaying the thumbnails as a grid.

The working prototype’s plugin is from Photo Swipe

http://www.photoswipe.com/

But I’ve come across this plugin below that Im gonna give a go too. I’d prefer the gallery to not display as a grid of thumbnails. This plugin below displays them as one image across the screen with navigation controls, which is what I want.

http://www.pixedelic.com/plugins/camera/

I’ll report back……..

 

Reporting back……

So I got the Pixedelic plugin to work and it looks pretty cool…. but maybe a little tacky for me to be honest. The gallery plays through the photos with some ‘gross’ transitions. I might have a look at the code and see if I can remove some of these animations. I’m not really into them.

I’m gonna go on another search and see what other plugins I can find.

ROLL OUT DEM THEMES.

THEMEROLLER

Screen Shot 2013-04-18 at 13.17.21

Daily Problem Diary – Wednesday March 27th

So, today I have decided to tackle the UI for my app.

I will be using the JQuery Mobile UI Framework to build the app. We had previously done some of this development in last semesters Emerging Technology class, so I had a basic understanding of how it works. It a fun and pretty straight forward way to build nice mobile UI structures.

I’m using my mockups to work by, and referencing the JQuery Demo libraries.

 

Daily Problem Diary – Tuesday March 26th

So today I’m moving onto adding HTML content to my Info Windows. Again, I’m referencing the ‘Beginning Google Maps API’ book to try and figure this one out. The book runs through a tutorial on adding HTML content to one Info Window, however I’m now dealing with 12, and all with different content. Off the top of my head, I would imagine the content will be added by referencing each variables Index number, but sure we’ll see as I go along. I’m most likely going to be referencing various internet sources also. WISH ME LUCK!

Ill update at the end of the day.

End of Day – Monday March 27th

BOOM! PROBLEM SOLVED!

I posted earlier today regarding the problem I was having with getting multiple markers on my map. I figured it out anyway, which has left me in a very good mood!

I had been following the tutorials in the ‘Beginning Google Maps API’ book, but came up against a problem with the array and for loopI just couldnt get the the markers to display on my map, so I moved onto to looking at some other tutorials. I came across this tutorial here http://www.dreamdealer.nl/tutorials/placing_multiple_markers_on_a_google_map.html. In my original code, I used an array literal: 

var myArray = [ ];

I then entered the values using the push method:

myArray.push();

But the markers were not showing on my map

I then tried the code below which shows the Lat Lng values directly entered into the array and it worked.

I also added onload = ‘initializeMaps()’ to the <body> tag in my HTML file.

 

var locations = [

[‘The GPO’, 53.349331, -6.260724],
[‘Liberty Hall’, 53.348393, -6.25541],
[‘Bolands Mill’, 53.342159, -6.237267],
[‘South Dublin Union’, 53.340512, -6.29486],
[‘Jacobs Factory’, 53.338543, -6.268795],
[‘City Hall’, 53.343881, -6.267195],
[‘St.Stephens Green’, 53.339767, -6.260504],
[‘The Four Courts’, 53.346888,-6.273365],
[‘Mount Street Bridge’, 53.337727,-6.240657],
[‘North King Street’, 53.349908, -6.276175],
[‘Moore Street’, 53.350484, -6.262641],
[‘Kilmainham Gaol’, 53.34202, -6.309628]

];

 

function initializeMaps() {
var latlng = new google.maps.LatLng(53.346888,-6.273365);
var mapOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
disableDefaultUI: true
};

var map = new google.maps.Map(document.getElementById(“googleMap”), mapOptions);

var infowindow = new google.maps.InfoWindow(), marker, i;

for (i = 0; i < locations.length; i++) {

marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

 

 

 

Screen Shot 2013-03-25 at 20.47.28

 

Screen Shot 2013-03-25 at 20.47.43

 

Daily Problem Diary – Monday March 27th

So Im gonna update my blog here with updates of any problems I am trying to resolve with the code.

Right now, Im having difficulty in trying to display multiple place markers on my map.

The solution to displaying  multiple markers on a map is to store all the Lat Lng values in an array and have it run through a loop where it will run code to create markers for each Lat Lng and also an Info Window.

At the minute, I’m running through the code to find any errors. My syntax is showing clear in Dreamweaver, however when run in Chrome no markers are being displayed on my map.