0

I really hope someone can help me here as its baffling me...

I am using Sharepoing 2010. I have a list , in the list i have the following fields...

'Image' 'Link'

on both occasions i am using 'Hyperlink or Picture'

I can get the images displaying on the page.. but i would like it so that when the user clicks on the image(s) it takes them to the value (the hyperlink) that is in the 'link' column. So far it seems impossible.

Does anyone know of a simple way on how to do this?

I am sorry am fairly new to Sharepoint.. i hope you can help as its really become a stumbling block for me with my project.

1

Solution:

Reason and because of the solution: I will use a utility OData plate, used in SharePoint 2013 and 2010 When migrating from 2010 to 2013 will not have conflict.

If you want to know more follow the link: http://msdn.microsoft.com/en-us/library/hh166950(v=nav.71).aspx

First step:

See how are the names of each column: In your script put the following code:

$.ajax({
    async: false,
    url: "http://www.[DOMAIN].com.br/_api/web/lists/getbytitle('[NAME LIST]')/items()",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function(data){
        console.log(data);
    }
});

Remember to change the values ​​in the URL there.

Open the console of your browser and see what it returns with their information for your list.

Second step:

I created a script that does everything you want. Below:

// Created by: Renan Fiedler de Oliveira
// From: Brazil
var clients = new Array();
var htmlViewClients = '';
$(document).ready(function(){
    $('#viewClients').html('');
    $.ajax({
        async: true,
        url: "http://www.DOMAIN.com.br/_api/web/lists/getbytitle('Campaigns')/items?$top=10000",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function(data){
            for(var i=0;i<data.d.results.length;i++){
                clients.push({background: data.d.results[i].Image, title: data.d.results[i].Title,  link: data.d.results[i].Link});
                if(i%3 == 0){
                    if(i != 0){
                        htmlViewClientes += '</tr>';
                    }
                    htmlViewClientes += '<tr>';
                }
                htmlViewClients += '<td id="link'+i+'">'
                +'<a href="'+clients[i].link+'" style="text-decoration: none;">'
                +'<div style="width: 150px; height: 150px; overflow:hidden; background-image: url('+clients[i].background+')">'
                +'<div id="data'+i+'" style="width: 84%; height: 100%; padding: 8%; position: relative; top: 63%; background-color: rgba(0, 0, 0, 0.6); color: white">'
                +'<p>'+clients[i].title+'</p>'
                +'</div>'
                +'</div>'
                +'</a>'
                +'</td>';
                if(i+1 == data.d.results.length){
                    htmlViewClients += '</tr>';
                }
            }
            $('#viewClients').append(htmlViewClients);
            for(var j=0;j<clients.length;j++){
                $('#data'+j)
                .mouseenter(function() {
                    $(this).animate({
                        top:'0%'
                    });
                })
                .mouseleave(function() {
                    $(this).animate({
                        top:'65%'
                    });
                });
            }
        },
        error: function(){
            console.log('Error');
        }
    });
});

Third step:

In the body of your page Insera a table with id = "viewClients" and insert the jquery (http://jquery.com/download/) and his script on your page.

Remember to change the names of variables and url. Put everything in its place for your problem not occur.

Recommend not using SharePoint Designer, you can do it all by Sahrepoint. You click edit page and edit there, this functionality is all javascript.

I am available to help you.

  • Hi Renanfdo, that was quick... the second option starting from '// Created by: Renan Fiedler de Oliveira' is that the background image solution i need to do? where do i put this code, do i start all over again, sorry you will have to give me step by step instruction. are you saying my existing approach is no longer needed? Regards Moses – b5ml Sep 10 '14 at 14:58
  • hi Renanfdo can i ask you to kindly email me at mosesmia1 at gmail . com i am based in the UK, and the office will be closing pretty soon. But would like to catch up tomorrow if this is okay with you? however i will check my email tonight. – b5ml Sep 10 '14 at 15:30
  • The background image will be your image you want to appear. – Renanfdo Sep 10 '14 at 16:59
0

You can use JQuery, using ajax.

$.ajax({
    async: false,
    url: "../../_api/web/lists/getbytitle('Name List')/items",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function(image){
        (method)
    }
});

If you are on a custom display form you use ajax to grab the values ​​and enter only with javascript into a div.

To get the id of the item that is displaying use this method:

var ItemID = _GET("ID");
/**
* Created by: http://gustavopaes.net
 * Created on: Nov/2009
 * 
 * Retorna os valores de parâmetros passados via url.
 *
 * @param String Nome da parâmetro.
 */
function _GET(name)
{
  var url   = window.location.search.replace("?", "");
  var itens = url.split("&");
    var n; 
  for(n in itens)
  {
    if( itens[n].match(name) )
    {
      return decodeURIComponent(itens[n].replace(name+"=", ""));
    }
  }
  return null;
}

Using this method, you can filter by ajax.

$.ajax({
        async: false,
        url: "../../_api/web/lists/getbytitle('Name List')/items?$filter=Id eq '"+ItemID+"'",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function(image){
            (method)
        }
    });

If you want to see more about using ajax. Called this method "OData" just search it on google.

I am available to help you

  • Hi Renanfdo I appreciate you looking at this. I do have to admit it a little bit over my head, considering its all new to me, i may need a dummies approach to this if its okay with you. My client wants a page with Nine images (i have done this bit) & when they click on the images it should take them to link. They can also upload images to the image folder then copy and paste the link to the image column. I am not sure i am 100% confident on what to do with the snippets you have added Is there a simpler way or if you can provide me with the dummies guide i really will appreciate this. Moses – b5ml Sep 10 '14 at 13:24
  • You are using a list or a library? There is a link library where you insert a background image and the image becomes a link. You could redirect to a picture library. – Renanfdo Sep 10 '14 at 13:33
  • It is those same blue link, when you install Sharepoint 2013 for the first time – Renanfdo Sep 10 '14 at 13:37
  • To create this 3x3 image area (9 images in total) i have gone into 'Design' under 'ListViewTools' and used the 3rd template (which is like a grid type of template) and i have linked it up with my list (called: 'campaigns') and used the columns 'image' and 'hyperlink'. Well i wasn’t able to use the 'hyperlink' column as this was the stumbling block. Sorry for my lame explanation, i am just trying to conjure of the request the easier way. – b5ml Sep 10 '14 at 13:47
  • Sorry the above i have done in Designer. – b5ml Sep 10 '14 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.