Image and Hyperlink column in a list

Question

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.

Answer 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.

Answer 2

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