7 Replies Latest reply on Aug 26, 2016 12:22 PM by tamara756

    Lightroom Web Gallery and Pin it code

    tamara756

      Is there anyway to add the "Pin It" code to the Lightroom cc Web Gallery?  I would like to have it appear when users hover over an image. 

        • 1. Re: Lightroom Web Gallery and Pin it code
          Mohit Goyal Adobe Employee (Admin)

          Hi tamara,

           

          Please refer the below link, related to web gallery in Lightroom.

           

          Creating web galleries in Lightroom

           

          Regards,

          Mohit

          • 2. Re: Lightroom Web Gallery and Pin it code
            tamara756 Level 1

            Hello Mohit,

             

            I am aware of the Photoshop Lightroom tutorial, although, this does not

            address my question to adding code to implement the "Pin it" button on

            hover over images.  This is so users can add the gallery images to a board

            on their Pinterest account.

             

            Do you know if this is possible?  I have gone into the gallery index.html

            file through Dreamweaver, but it is difficult to tell just where to place

            the "Pin it" button code.

             

            Thank you for any help you can provide.

             

            Tamara

             

            On Thu, Aug 18, 2016 at 2:34 AM, Mohit Goyal <forums_noreply@adobe.com>

            • 3. Re: Lightroom Web Gallery and Pin it code
              Per Berntsen Adobe Community Professional

              You'll get better help with this if you ask in the Dreamweaver forum - Dreamweaver support forum

              • 4. Re: Lightroom Web Gallery and Pin it code
                Piotr Ku Level 1

                Hi Tamara

                 

                you can try some of the jquery plugins:
                1. export images into a web gallery HTML page

                2. add some "pin it" plugin to that page - you can check for instance this one - first from the top I googled a moment ago: http://www.jqueryscript.net/social-media/jQuery-Plugin-To-Add-Pinterest-Pin-It-Button-Over -Images-imgPin.html - there is a "how to use it" section which makes the process quite easy

                • 5. Re: Lightroom Web Gallery and Pin it code
                  tamara756 Level 1

                  Thank you.  I have seen this plugin.  My issue is - I cannot locate where

                  the images (thumbnails) are in the Adobe Lightroom gallery files to wrap

                  the code.  I have been able to add the Pin It code to the large images of

                  the slideshow, so for now I will have to settle for this feature.

                   

                  Again Thank you,

                   

                  Tamara

                  • 6. Re: Lightroom Web Gallery and Pin it code
                    Piotr Ku Level 1

                    Can you put online your example gallery and I will try to see what can be done about the thumbnails, although I think that if you'd pin the thumbnails - the thumbnails will be shared - not the large images if that is your intention.

                    I'm afraid that the concept of pining the thumbnails and sharing the big ones could be not possible to do with this plugin without modifications.

                     

                    Piotr

                    • 7. Re: Lightroom Web Gallery and Pin it code
                      tamara756 Level 1

                      below is my html code - I  added the pin it (bold)and it appears to be working on the slideshow images on my testing site.  maybe I do not want them on the thumbnails - you make a good point.

                       

                      <!DOCTYPE html>

                      <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" xmlns:lr="http://adobe.com/lrg/0.0"> <![endif]-->

                      <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" xmlns:lr="http://adobe.com/lrg/0.0"> <![endif]-->

                      <!--[if IE 8]>         <html class="no-js lt-ie9" xmlns:lr="http://adobe.com/lrg/0.0"> <![endif]-->

                      <!--[if gt IE 8]><!--> <html class="no-js" xmlns:lr="http://adobe.com/lrg/0.0"> <!--<![endif]-->

                          <head>

                              <meta charset="utf-8">

                              <meta http-equiv="X-UA-Compatible" content="IE=edge">

                              <title>OBR Gallery</title>

                              <meta name="description" content="">

                              <meta name="viewport" content="width=device-width, initial-scale=1">

                              <link rel="stylesheet" type="text/css" href="assets/css/normalize.css">

                              <link rel="stylesheet" type="text/css" href="assets/css/main.css">

                              <link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="assets/css/custom.css" >

                              <script src="assets/js/libs/modernizr.custom.23122.js"></script>

                                    <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

                       

                          </head>

                          <body class="has-header row-spacing-md" data-pagination-style="scroll" data-target-row-height="200">

                                              <header class="" >

                                  <div class="background"></div>

                                  <div class="meta-left">

                                      <p id="galleryTitle" class="title">Gallery</p>

                                                      <p id="galleryAuthor" class="author"></p>

                                  </div>

                                  <div class="meta-right">

                       

                       

                                  </div>

                                  <ul class="gallery-meta" >

                                      <li id="buttonFullscreen" title="Fullscreen Mode">

                                          <div class="icon">

                                              <svg version="1.1" id="svgIconFullscreen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 16" style="enable-background:new 0 0 18 16;" xml:space="preserve">

                                              <g>

                                                  <path class="custom-colorable" d="M5.3871,9.95599C5.19136,9.76858,4.99176,9.85763,4.79376,10.0472l-2.86173,2.74138v-1.55 466

                                                      c0-0.25257-0.21387-0.45733-0.47767-0.45733H0.47767C0.21387,10.7766,0,10.98136,0,11.23393v 3.37367v0.93511

                                                      C0,15.79524,0.21387,16,0.47767,16h0.97668h3.5238c0.26377,0,0.47764-0.20476,0.47764-0.4572 9v-0.93511

                                                      c0-0.25254-0.21387-0.45733-0.47764-0.45733H3.34554l2.86694-2.7451c0.198-0.18957,0.30914-0 .44923,0.11342-0.63664L5.3871,9.95599

                                                      z"/>

                                                  <path class="custom-colorable" d="M17.52233,10.7766h-0.97672c-0.26377,0-0.47764,0.20476-0.47764,0.45733v1.55466l-2.86172 -2.74138

                                                      c-0.198-0.18957-0.39764-0.27862-0.59335-0.09121l-0.93879,0.81254c-0.19575,0.18741-0.08458 ,0.44707,0.11342,0.63664

                                                      l2.8669,2.7451h-1.63258c-0.26377,0-0.47764,0.20479-0.47764,0.45733v0.93511c0,0.25254,0.21 387,0.45729,0.47764,0.45729h3.52376

                                                      h0.97672C17.7861,16,18,15.79524,18,15.54271v-0.93511v-3.37367C18,10.98136,17.7861,10.7766 ,17.52233,10.7766z"/>

                                                  <path class="custom-colorable" d="M3.34554,1.84973h1.63262c0.26377,0,0.47764-0.20479,0.47764-0.45733V0.45733C5.45579,0.2 0476,5.24193,0,4.97815,0h-3.5238

                                                      H0.47767C0.21387,0,0,0.20476,0,0.45733v0.93508v3.3737C0,5.01864,0.21387,5.2234,0.47767,5. 2234h0.97668

                                                      c0.26381,0,0.47767-0.20476,0.47767-0.45729V3.21142L4.79376,5.9528c0.198,0.18957,0.3976,0. 27862,0.59335,0.09121l0.93879-0.81254

                                                      C6.52161,5.04409,6.41048,4.7844,6.21247,4.59483L3.34554,1.84973z"/>

                                                  <path class="custom-colorable" d="M17.52233,0h-0.97672h-3.52376c-0.26377,0-0.47764,0.20476-0.47764,0.45733v0.93508

                                                      c0,0.25254,0.21387,0.45733,0.47764,0.45733h1.63258l-2.8669,2.7451c-0.19801,0.18957-0.3091 7,0.44926-0.11342,0.63663

                                                      l0.93879,0.81254c0.19571,0.18741,0.39535,0.09836,0.59335-0.09121l2.86172-2.74138V4.7661

                                                      c0,0.25254,0.21387,0.45729,0.47764,0.45729h0.97672C17.7861,5.2234,18,5.01864,18,4.7661v-3 .3737V0.45733

                                                      C18,0.20476,17.7861,0,17.52233,0z"/>

                                              </g>

                                              </svg>

                                          </div>

                                      </li>

                                  </ul>

                              </header>

                             

                                      <div id="thumbnailContainer" >

                                               

                                  <div class="thumbnails"></div>

                       

                       

                              </div>

                       

                       

                              <div id="loupeContainer" class="show-corners" >

                       

                       

                                  <div class="background" ></div>

                                  <div class="image-container" >

                       

                       

                                  </div> 

                       

                       

                                  <div class="side-navigation">

                                      <div class="hotspot" id="hotspotPrevLoupe">

                       

                       

                                          <div class="button" id="buttonPrevSideLoupe">

                                         

                                              <svg version="1.1" baseProfile="basic" id="svgIconPrevSideLoupe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" xml:space="preserve"><path class="icon custom-colorable" fill="#231F20" d="M0,0l0,50h50V0L0,0z M18.491,25.05l9.707-9.264c0.418-0.399,1.092-0.403,1.506-0.008l1.498,1.43c0.413,0.395,0.41 ,1.039-0.009,1.438l-6.765,6.456l6.613,6.31c0.41,0.392,0.414,1.024,0.008,1.412l-1.471,1.404 c-0.406,0.387-1.068,0.384-1.479-0.008l-6.612-6.311L18.491,25.05z"/></svg>

                                          </div>

                                      </div>

                                      <div class="hotspot" id="hotspotNextLoupe">

                                          <div class="button" id="buttonNextSideLoupe">

                                              <svg version="1.1" baseProfile="basic" id="svgIconNextSideLoupe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" xml:space="preserve">

                                                  <path class="icon custom-colorable" fill="#231F20" d="M0,0v50h50V0H0z M28.513,27.909l-6.612,6.311c-0.411,0.392-1.073,0.395-1.479,0.008l-1.471-1.404 c-0.406-0.388-0.402-1.02,0.008-1.412l6.613-6.31l-6.765-6.456c-0.419-0.399-0.422-1.043-0.0 09-1.438l1.498-1.43 c0.414-0.395,1.088-0.391,1.506,0.008l9.707,9.264L28.513,27.909z"/>

                                              </svg>

                                             

                                          </div>

                                      </div>

                                     

                                  </div>

                                 

                                  <div class="lateral-nav-container">

                                      <ul class="lateral-nav">

                                          <li id="buttonPrev">

                                              <svg version="1.1" id="svgIconPrevLoupe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve">

                                                  <style type="text/css">

                                                      .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#231F20;}

                                                  </style>

                                                  <path class="icon custom-colorable" d="M25.20105,14.76864l-8.2004,7.773l2.5314,2.3992l5.5858,5.2952c0.3469,0.3289,0.9064,0.33 18,1.2497,0.0065

                                                      l1.2431-1.1783c0.3429-0.3252,0.3398-0.8555-0.0071-1.1846l-5.5864-5.2948l5.7149-5.4171c0.3 535-0.3349,0.3568-0.875,0.0074-1.2063

                                                      l-1.2657-1.1995C26.12435,14.43064,25.55435,14.43354,25.20105,14.76864z"/>

                                              </svg>

                                          </li>

                                          <li class="count"><span id="countCurrent"></span> of <span id="countTotal"></span></li>

                                          <li id="buttonNext">

                                              <svg version="1.1" id="svgIconNextLoupe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve">

                                                  <style type="text/css">

                                                      .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#231F20;}

                                                  </style>

                                                  <path class="icon custom-colorable" d="M19.79895,14.76864l8.2004,7.773l-2.5314,2.3992l-5.5858,5.2952c-0.3469,0.3289-0.9064,0. 3318-1.2497,0.0065

                                                      l-1.2431-1.1783c-0.3429-0.3252-0.3398-0.8555,0.0071-1.1846l5.5864-5.2948l-5.7149-5.4171

                                                      c-0.3535-0.3349-0.3568-0.875-0.0074-1.2063l1.2657-1.1995C18.87565,14.43064,19.44565,14.43 354,19.79895,14.76864z"/>

                                              </svg>

                                          </li>

                                      </ul>

                       

                       

                                  </div>

                       

                       

                                  <div class="info-container"> 

                                  <a   data-pin-do="buttonBookmark" data-pin-tall="true" data-pin-round="true" data-pin-save="false" href="https://www.pinterest.com/pin/create/button/" ><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_32.png" /></a>

                                      <div id="loupeMeta"></div>

                                  </div>

                                  <div id="loupeCloseButton">

                                      <svg version="1.1" id="svgIconLoupeClose" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

                                           viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve">

                                          <path class="shape-x custom-colorable" d="M14.77881,17.30074l5.212,5.2222l-5.0831,5.0924c-0.3476,0.3484-0.5746,0.7624-0.2308,1.1 067l1.5682,1.4763

                                              c0.3436,0.3443,0.8045,0.2596,1.1521-0.0886l5.0825-5.093l5.2119,5.222c0.3536,0.3547,0.9244 ,0.3578,1.2741,0.0073l1.2677-1.27

                                              c0.3497-0.3507,0.3465-0.9224-0.0071-1.2768l-5.2119-5.2221l5.0828-5.0925c0.3475-0.3485,0.5 429-0.8259,0.1994-1.1702

                                              l-1.6474-1.4921c-0.3438-0.3443-0.6936-0.1803-1.0411,0.1679l-5.0828,5.0929l-5.212-5.222

                                              c-0.3537-0.3546-0.9241-0.3577-1.2742-0.007l-1.2672,1.2698C14.42171,16.37464,14.42491,16.9 4624,14.77881,17.30074z"/>

                                      </svg>

                                  </div>

                                

                              </div>

                       

                       

                              <script type="text/javascript">

                                  var LR = LR || {};

                                  LR.images = [                                                                                        {"id": "327", "largeWidth": "1200", "largeHeight": "675", "exportFilename": "PIC_0059", "title": "", "caption" : ""},

                                               {"id": "342", "largeWidth": "1200", "largeHeight": "675", "exportFilename": "PIC_0074", "title": "", "caption" : ""},

                                               {"id": "360", "largeWidth": "1200", "largeHeight": "675", "exportFilename": "PIC_0080", "title": "", "caption" : ""},

                                               {"id": "374", "largeWidth": "1200", "largeHeight": "1109", "exportFilename": "Female_bear_1", "title": "", "caption" : ""},

                                               {"id": "390", "largeWidth": "1200", "largeHeight": "800", "exportFilename": "male_bear_4", "title": "", "caption" : ""},

                                               {"id": "410", "largeWidth": "1200", "largeHeight": "800", "exportFilename": "Cub_1", "title": "", "caption" : ""},

                                               {"id": "424", "largeWidth": "1200", "largeHeight": "800", "exportFilename": "bear_in_water", "title": "", "caption" : ""},

                                               {"id": "438", "largeWidth": "1200", "largeHeight": "643", "exportFilename": "bear_tag", "title": "", "caption" : ""},

                                               {"id": "452", "largeWidth": "1200", "largeHeight": "800", "exportFilename": "DSC_6655", "title": "", "caption" : ""},

                                               {"id": "468", "largeWidth": "1200", "largeHeight": "800", "exportFilename": "DSC_6671", "title": "", "caption" : ""},

                                               {"id": "482", "largeWidth": "1200", "largeHeight": "811", "exportFilename": "Big_Tyson_relaxing", "title": "", "caption" : ""},

                                               {"id": "496", "largeWidth": "794", "largeHeight": "1192", "exportFilename": "Tyson_growling_at_youngster", "title": "", "caption" : ""},

                                               {"id": "510", "largeWidth": "1184", "largeHeight": "792", "exportFilename": "Tyson_stalking_his_next_meal", "title": "", "caption" : ""},

                                               {"id": "524", "largeWidth": "792", "largeHeight": "1192", "exportFilename": "Yearlings_at_the_falls", "title": "", "caption" : ""},

                                                          ]        </script>

                              <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

                              <script>window.jQuery || document.write('<script src="assets/js/libs/jquery-1.10.2.min.js"><\/script>')</script>

                              <script src="assets/js/libs/jquery.velocity.min.js"></script>

                              <script src="assets/js/main.js"></script>

                          </body>

                      </html>