none
Abrir uma foto como um Pop Up. RRS feed

  • Pergunta

  • 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

    quarta-feira, 29 de fevereiro de 2012 14:10

Respostas

  • 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>

    • Editado buckenn quarta-feira, 7 de março de 2012 20:14 dar um auto-suficiente exemplo
    • Marcado como Resposta Pedro F. G. Vasconcelos terça-feira, 1 de julho de 2014 18:59
    quarta-feira, 7 de março de 2012 17:51

Todas as Respostas

  • Pedro, seria algo parecido com isso?

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

    quarta-feira, 29 de fevereiro de 2012 14:41
  • 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

    quarta-feira, 29 de fevereiro de 2012 14:54
  • 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

    quarta-feira, 29 de fevereiro de 2012 16:22
  • 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

    quarta-feira, 29 de fevereiro de 2012 17:09
  • 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?


    • Editado Rafael Fausto quarta-feira, 29 de fevereiro de 2012 17:14
    quarta-feira, 29 de fevereiro de 2012 17:14
  • 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

    quarta-feira, 29 de fevereiro de 2012 18:24
  • 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,

    quinta-feira, 1 de março de 2012 11:50
  • 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

    quinta-feira, 1 de março de 2012 12:02
  • 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,

    quinta-feira, 1 de março de 2012 12:19
  • 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>

    • Editado buckenn quarta-feira, 7 de março de 2012 20:14 dar um auto-suficiente exemplo
    • Marcado como Resposta Pedro F. G. Vasconcelos terça-feira, 1 de julho de 2014 18:59
    quarta-feira, 7 de março de 2012 17:51