Solved

Little Help with some jQuery Overlay

Posted on 2010-11-18
4
490 Views
Last Modified: 2012-05-10
Been banging my head on this problem for a little while and it's getting late hopefully someone will see what is wrong with the code.  I am using jQuery to have a vertical scroll box of images which fill a div to the left of it on mouseover.  All of this part of the code works fine.  I am trying to implement a lightbox type effect using the jQuery function overlay.  This seems to work great so long as I do not use javascript to switch which file is loaded.  If I use the javascript I currently have to switch the images, the images themselves do appear however the close button never appears in the upper right corner as it should.  I have tried a few different things to no affect.
The image code which works currently can be found on line 129.  What I want is to comment that out and use the js function "setImage" (currently set to "ssetImage" to allow the working code to run properly on line 147.
Hope someone can tell me what I am doing wrong here...  Thanks in advance!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>Image Scroller</title>

        <script type="text/javascript" src="jquery.tools.min.js"></script>

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

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

        <style>

            /* the overlayed element */

            .simple_overlay {



                /* must be initially hidden */

                display:none;



                /* place overlay on top of other elements */

                z-index:10000;



                /* styling */

                background-color:#333;



                width:600px;

                min-height:200px;

                border:1px solid #666;



                /* CSS3 styling for latest browsers */

                -moz-box-shadow:0 0 90px 5px #000;

                -webkit-box-shadow: 0 0 90px #000;

            }



            /* close button positioned on upper right corner */

            .simple_overlay .close {

                background-image:url(img/close.png);

                position:absolute;

                right:-15px;

                top:-15px;

                cursor:pointer;

                height:35px;

                width:35px;

            }

            /* styling for elements inside overlay */

            .details {

                position:absolute;

                top:15px;

                right:15px;

                font-size:11px;

                color:#fff;

                width:150px;

            }



            .details h3 {

                color:#aba;

                font-size:15px;

                margin:0 0 -10px 0;

            }

        </style>

    </head>

    <body>

        <div id="container">

            <div id="actions">

                <a class="prev">&laquo; Back</a>

                <a class="next">More pictures &raquo;</a>

            </div>

            <div id="loadarea" style="margin:0 auto;">



            </div>

            <!-- root element for scrollable -->

            <div class="scrollable vertical">

                <!-- root element for the items -->

                <div class="items">

                    <!-- Page 1 -->

                    <div>

                        <!-- Item 1 -->

                        <div class="item">

                            <a href="/fma/img/1.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">

                                <img class="thumbnail" src="img/1.jpg" rel=".simple_overlay" alt="Image 1" onclick="setImage(1)">

                            </a>

                            <h3>Image Title 1</h3>

                        </div>

                        <!-- Item 2 -->

                        <div class="item">

                            <a href="/fma/img/2.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">

                                <img class="thumbnail" src="img/2.jpg" rel=".simple_overlay" alt="Image 2" onclick="setImage(2)">

                            </a>

                            <h3>Image Title 2</h3>

                        </div>

                        <!-- Item 3 -->

                        <div class="item">

                            <a href="/fma/img/3.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">

                                <img class="thumbnail" src="img/3.jpg" rel=".simple_overlay" alt="Image 3" onclick="setImage(3)">

                            </a>

                            <h3>Image Title 3</h3>

                        </div>

                    </div> <!-- End of Page 1 -->

                    <div><!-- Page 2 Starts here -->

                        <!-- Page 2 -->

                        <div>

                            <!-- Item 4 -->

                            <div class="item">

                                <a href="/fma/img/4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">

                                    <img class="thumbnail" src="img/4.jpg" rel=".simple_overlay" alt="Image 4" onclick="setImage(4)">

                                </a>

                                <h3>Image Title 4</h3>

                            </div>

                            <!-- Item 5 -->

                            <div class="item">

                                <a href="/fma/img/5.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">

                                    <img class="thumbnail" src="img/5.jpg" rel=".simple_overlay" alt="Image 5" onclick="setImage(5)">

                                </a>

                                <h3>Image Title 5</h3>

                            </div>

                            <!-- Item 6 -->

                            <div class="item">

                                <a href="/fma/img/6.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">

                                    <img class="thumbnail" src="img/6.jpg" rel=".simple_overlay" alt="Image 6" onclick="setImage(6)">

                                </a>

                                <h3>Image Title 6</h3>

                            </div>

                        </div> <!-- End of Page 2 -->



                    </div>

                </div>

            </div>

        </div>

        <!-- first overlay. id attribute matches our selector -->

        <div class="simple_overlay" id="overlayInsert">



            <!-- large image -->

            <img src="/fma/img/1.jpg" />



            <!-- image details 

            <div class="details">

                <h3>Title</h3>

                <h4>Sub Title</h4>

                <p>The content ...</p>

            </div>-->



        </div>

        <script type="text/javascript">

            // execute your scripts when DOM is ready. this is a good habit

            jQuery(document).ready(function() {

                //set the overlay for imgs with rel matching id/class

                jQuery("img[rel]").overlay();

                // initialize scrollable with mousewheel support

                jQuery(".scrollable").scrollable({ vertical: true, mousewheel: true });

            });

            function ssetImage(img){

                imgOverlay = document.getElementById("overlayInsert");

                imgOverlay.innerHTML = ("<img src=\"img/"+img+".jpg\">");

            };

        </script>

    </body>

</html>

Open in new window

0
Comment
Question by:PhillipsPlastics
  • 3
4 Comments
 
LVL 4

Expert Comment

by:docnica
ID: 34170668
can you post an example url?
0
 

Accepted Solution

by:
PhillipsPlastics earned 0 total points
ID: 34172264
Here's it working with a single image for the overlay:
Working Model

Here's it working with multiple images but without a close button:
http://bit.ly/bJNWR5
0
 

Author Comment

by:PhillipsPlastics
ID: 34179818
Solved my problem.
0
 

Author Closing Comment

by:PhillipsPlastics
ID: 34211291
Solved.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now