locked
Seperate Imaged in Grip App Template -Help RRS feed

  • Question

  • Hello,

    I am using the Grid app template in VS Express and I am trying to show different images.   What and where should I add a syntax so that the WinJS knows to access my images not already linked on the home page tiles?

    • data.js file:

            var one = "images/image.png";
            var two = "images/image.png";
            var three = "images/image.png";
            var ww_1 = "images/puzzles/ww_1.png";
            var ww_2 = "images/puzzles/ww_2.png";
            var ww_3 = "images/puzzles/ww_3.png";

            // Each of these sample groups must have a unique key to be displayed
            // separately.
            var sampleGroups = [
                { key: "group1", title: "test", subtitle: "Group Subtitle: 1", backgroundImage: one, description: groupDescription  },
                { key: "group2", title: "test", subtitle: "Group Subtitle: 2", backgroundImage: three, description: groupDescription },
                { key: "group3", title: "test", subtitle: "Group Subtitle: 3", backgroundImage: two, description: groupDescription },
                { key: "group4", title: "test", subtitle: "Group Subtitle: 4", backgroundImage: three, description: groupDescription },
                { key: "group5", title: "test", subtitle: "Group Subtitle: 5", backgroundImage: two, description: groupDescription },
                { key: "group6", title: "test", subtitle: "Group Subtitle: 6", backgroundImage: one, description: groupDescription }
            ];

            // Each of these sample items should have a reference to a particular
            // group.
            var sampleItems = [


                { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: one },
                { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: two },
                { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: two },
                { group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: one },

    • you can see i added the var ww_1 = "images/puzzles/ww_1.png"; and such for the images I would like to show up on the item details page, not the homepage. 

    Thanks,

    Nate

    Monday, January 7, 2013 7:12 AM

All replies

  • <img src="ms-appx:///testimages/testimage1.png" />

    Hi,

    Just set the image path as follow:


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, January 8, 2013 8:38 AM
  • Thank you,  that worked but every item's page has the same image listed image.  How would I add 20 different images, each to its own details page?
    Friday, January 11, 2013 7:05 AM
  • Hi,

    Maybe you can store the images in a array. And then pieced together.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, January 11, 2013 7:10 AM
  • Im new to java... any chance you could show me some sample code lets say the pictures were name "picture1 - picture5" and have different page outputs.  And what page would I add it to .js, .css, .html

    thanks


    • Edited by nmillett Friday, January 11, 2013 8:55 AM
    Friday, January 11, 2013 7:18 AM