Abrir uma foto como um Pop Up.

Question

This website supports Stop Online Piracy Act (SOPA). Find out more about what SOPA means by visiting http://fightforthefuture.org/pipa

Press Esc or click on the X to the right to dismiss me!

Bom Dia Senhores,

Gostaria de tirar uma dúvida com vocês,

É possível colocar um link ou algo parecido em um texto para abrir um PopUp como se fosse um 'novo item'?

Exemplo:

Quando eu clicasse na imagem aparecer uma caixa dessa com a imagem, sobrepondo o site.

No aguardo,

Pedro Vasconcelos

---

Atenciosamente, Pedro Vasconcelos http://pevasconcelos.wordpress.com

Answer 1

Pedro, seria algo parecido com isso?

http://lokeshdhakar.com/projects/lightbox2/

Answer 2

Rafael,

É esse efeito mesmo que eu quero.

Sobre a instalação, fica instalado com um plug-in no servidor do sharepoint?

Pode me falar mais sobre essa instalação?

Atenciosamente,

Pedro Vasconcelos

---

Atenciosamente, Pedro Vasconcelos http://pevasconcelos.wordpress.com

Answer 3

Você terá que armazenar os arquivos javascript (.js) e o arquivo de estilo (.css) na biblioteca de documentos do sharepoint.

Depois é só utilizar como o próprio site diz.

http://lokeshdhakar.com/projects/lightbox2/#how

Atenciosamente,

Rafael Fausto

Answer 4

This website supports Stop Online Piracy Act (SOPA). Find out more about what SOPA means by visiting http://fightforthefuture.org/pipa

Press Esc or click on the X to the right to dismiss me!

Na biblioteca de documentos dentro do site pai?

Pode ser na biblioteca, documentos compartilhados dentro do site?

No Aguardo,

Atenciosamente

Pedro Vasconcelos

---

Atenciosamente, Pedro Vasconcelos http://pevasconcelos.wordpress.com

Answer 5

Qualquer biblioteca de documentos.

O importante é lembrar que na hora que você for fazer algum tipo de referência e também que os usuários terão que ter acesso a essa biblioteca.

Ex.:

<script type="text/javascript" src="js/prototype.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Combinado?

Answer 6

This website supports Stop Online Piracy Act (SOPA). Find out more about what SOPA means by visiting http://fightforthefuture.org/pipa

Press Esc or click on the X to the right to dismiss me!

Entendi consegui jogar os arquivos no ativo do site.

Só estou apanhando na hora de passar os códigos pra master page no designer.

Existe algum modo mais fácil?

---

Atenciosamente, Pedro Vasconcelos http://pevasconcelos.wordpress.com

Answer 7

Então,

Se você quer utilizar esse efeito em varios lugares, o ideal é você realizar essa referência de JS e CSS na própria Master pelo SharePoint Designer.

O restante do código, tudo depende de você. Pode construir uma web part, utilizar a web part de editor de conteúdo ou a web part de consulta de conteúdo por exemplo.

Qualquer dúvida, estou à disposição.

Abs,

Answer 8

Entendi.

Você poderia printar pra mim la na master page aonde eu faço no código essa referência?

É a primeira vez que tento mexer com essa parte de desenvolvimento 'bruta' do SharePoint..sou iniciante nessa parte, fico mais na administração mesmo e desenvolvimento básico.

Se puder me ajuda,

No aguardo,

Abs.

---

Atenciosamente, Pedro Vasconcelos http://pevasconcelos.wordpress.com

Answer 9

Pedro,

Infelizmente não tenho nenhuma maquina virtual disponível no momento.

http://fitandfinish.ironworks.com/2010/01/the-best-way-to-add-custom-javascript-and-jquery-to-sharepoint.html

Nesse site explica de forma detalhada como adicionar uma referência.

Abs,

Answer 10

Pedro,

Consegiuou?

Coloco a referencia no meu default.master abaixo deste linha, assim:

<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>

<script type="text/javascript" src="</script">http://server/web/jquery.min.js"></script>

Posso usar esta referencia porque ja fiz copy do jquery.min.js no SharePoint nesta locacao.  Pode usar uma referencia diretamente pra site de jquery assime:

http://code.jquery.com/jquery-1.7.1.min.js

Porem, fica melhor download sua propria copia pra referer.

-buck

Com este exemplo pode ver a ideia.  Faz um Content Editor Web Part e usar o seguinte:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" >
$(function(){
    $("span#show-image-button").bind("click", function(){
        // Make visible the mask
        var maskHeight = $(document).height();
        var maskWidth = $(document).width();
        // Show the dialog
        var winH = $(window).height();
        var winW = $(window).width();
        $("#dialog").css("top", winH*.4 - $("#dialog").height()*.5);
        $("#dialog").css("left", winW*.5 - $("#dialog").width()*.5);
        $("#dialog").fadeIn(1000);
    });
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('.window').hide();
    });
});
</script>
<style>
#dialog-content .window {
  position:absolute;
  left:0;
  top:0;
  width:800px;
  height:500px;
  display:none;
  z-index:9999;
  padding:20px;
}
#dialog-content #dialog {
  width:800px; 
  height:500px;
  padding:10px;
  background-color:#ffffff;
}
</style>
<span id="show-image-button">Show</span>
<!-- Modal Dialog Stuff -->
<div id="dialog-content" style="overflow:auto;">
    <div id="dialog" class="window">
    <a href="#" class="close" style="float:right">Close</a>
    <img src="http://www.google.com/images/srpr/logo3w.png" />
    <div class='ms-propertysheet'><br/>
    <div class="project-summary-title" style="font-size:large"></div>
</div>