www.webdeveloper.com
+ Reply to Thread
Results 1 to 7 of 7

Thread: JQuery

  1. 10-24-2012 02:03 PM #1
    KittieKat
    KittieKat is offline Registered User
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17

    Question JQuery

    I'm looking for a certain type of JQuery or coding for something I'd like to do on my website. Bear with me as I attempt to explain what I'm looking for.

    I'm looking for a way to allow customers to click on an image, the image opens (like jquery lightbox) and a small slideshow associated with that image can be displayed. Pretty much like combining jquery lightbox with a jquery slider.

    If anyone has any ideas or suggestions I'd greatly appreciate it.

    Thank you!
    Reply With Quote Reply With Quote
  2. 10-24-2012 09:01 PM #2
    NoEffinWay
    NoEffinWay is offline Hello, I am NoEffinWay..
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    224
    Doesnt really get any better than this: http://www.jacklmoore.com/colorbox
    Reply With Quote Reply With Quote
  3. 10-29-2012 10:30 PM #3
    KittieKat
    KittieKat is offline Registered User
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17
    Thanks for the reference! I installed in onto my site, but I've run into an issue maybe you would know how to fix. Or anyone. Installing the files went fine, nothing missing (for example 4 by the way) But, for some strange reason, when I click on the thumbnail image to expand, the colorbox images (corners borders ect) are all to the left except for the bottom and top border and the image wont appear. Any idea?
    Reply With Quote Reply With Quote
  4. 10-30-2012 10:14 AM #4
    NoEffinWay
    NoEffinWay is offline Hello, I am NoEffinWay..
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    224
    Possibly the wrong frmae type for the content you are pulling.. Is there a link to the page with the issue?
    Reply With Quote Reply With Quote
  5. 10-30-2012 09:53 PM #5
    KittieKat
    KittieKat is offline Registered User
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17
    No, I haven't published the page to the web since it's such a mess. Would it help target the issue? or should I C/P the codes for you?
    Reply With Quote Reply With Quote
  6. 10-31-2012 12:00 PM #6
    NoEffinWay
    NoEffinWay is offline Hello, I am NoEffinWay..
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    224
    Either will work, I just need to see it to help fix it.
    Reply With Quote Reply With Quote
  7. 11-01-2012 08:36 AM #7
    KittieKat
    KittieKat is offline Registered User
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17
    OK so here is what I have in regards to the HTML I only pasted the HTML code that has the Colorbox, not sure if you needed the whole page:

    <script language="javascript" type="text/javascript">
    function clearText(field)
    {
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
    }
    </script>

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

    /***********************************************
    * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    </script>

    <script type="text/javascript">

    ddsmoothmenu.init({
    mainmenuid: "menu", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })

    </script>

    <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
    <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
    <script type="text/JavaScript" src="slimbox2.js"></script>
    <script type="text/JavaScript" src="jquery.min.js"></script>
    <script src="jquery.colorbox-min.js"></script>
    <script>
    jQuery(document).ready(function () {
    jQuery('a.color').colorbox({ opacity:0.5 , rel:'group1' });
    });
    </script>
    </head>
    <html>
    <body>
    <div id="main">

    <ul id="gallery">
    <a class='color' href="Beauty Images/Portfoilio/Portfolio4large.jpg"><img src="Beauty Images/Portfoilio/Portfolio1.jpg" width="430" height="321" alt="" border="0"></a>

    <a class='color' href='image2.jpg'>Photo_2</a>

    <a class='color' href='image3.jpg'>Photo_3</a>

    <div class="cleaner"></div>
    </div>

    Heres the CSS this is what I got from the site:

    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursorointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}

    /*
    User Style:
    Change the following styles to modify the appearance of ColorBox. They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#fff;}
    #colorbox{}
    #cboxTopLeft{width:25px; height:25px; background:url('Beauty Images/Portfoilio/border1.png') no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:url('Beauty Images/Portfoilio/border1.png') repeat-x 0 -50px;}
    #cboxTopRight{width:25px; height:25px; background:url('Beauty Images/Portfoilio/border1.png') no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:25px; background:url('Beauty Images/Portfoilio/border1.png') no-repeat 0 -25px;}
    #cboxBottomCenter{height:25px; background:url('Beauty Images/Portfoilio/border1.png') repeat-x 0 -75px;}
    #cboxBottomRight{width:25px; height:25px; background:url('Beauty Images/Portfoilio/border1.png') no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:url('Beauty Images/Portfoilio/border2.png') repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:url('Beauty Images/Portfoilio/border2.png') repeat-y -25px 0;}
    #cboxContent{background:#fff; overflow:hidden;}
    .cboxIframe{background:#fff;}
    #cboxError{padding:50px; border:1px solid #ccc;}
    #cboxLoadedContent{margin-bottom:20px;}
    #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
    #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
    #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
    #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
    #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
    #cboxLoadingOverlay{background:#fff url('Beauty Images/Portfoilio/loading.gif') no-repeat 5px 5px;}
    #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}

    /*
    The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
    when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
    See: http://jacklmoore.com/notes/ie-transparency-problems/
    */
    .cboxIE #cboxTopLeft,
    .cboxIE #cboxTopCenter,
    .cboxIE #cboxTopRight,
    .cboxIE #cboxBottomLeft,
    .cboxIE #cboxBottomCenter,
    .cboxIE #cboxBottomRight,
    .cboxIE #cboxMiddleLeft,
    .cboxIE #cboxMiddleRight {
    filter: progidXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
    }

    /*
    The following provides PNG transparency support for IE6
    Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
    */
    .cboxIE6 #cboxTopLeft{background:url('Beauty Images/Portfoilio/IE6/borderTopLeft.png');}
    .cboxIE6 #cboxTopCenter{background:url('Beauty Images/Portfoilio/IE6/borderTopCenter.png');}
    .cboxIE6 #cboxTopRight{background:url('Beauty Images/Portfoilio/IE6/borderTopRight.png');}
    .cboxIE6 #cboxBottomLeft{background:url('Beauty Images/Portfoilio/IE6/borderBottomLeft.png');}
    .cboxIE6 #cboxBottomCenter{background:url('Beauty Images/Portfoilio/IE6/borderBottomCenter.png');}
    .cboxIE6 #cboxBottomRight{background:url('Beauty Images/Portfoilio/IE6/borderBottomRight.png');}
    .cboxIE6 #cboxMiddleLeft{background:url('Beauty Images/Portfoilio/IE6/borderMiddleLeft.png');}
    .cboxIE6 #cboxMiddleRight{background:url('Beauty Images/Portfoilio/IE6/borderMiddleRight.png');}

    .cboxIE6 #cboxTopLeft,
    .cboxIE6 #cboxTopCenter,
    .cboxIE6 #cboxTopRight,
    .cboxIE6 #cboxBottomLeft,
    .cboxIE6 #cboxBottomCenter,
    .cboxIE6 #cboxBottomRight,
    .cboxIE6 #cboxMiddleLeft,
    .cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progidXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
    }

    Let me know if you need anything else. I feel like I'm missing something simple..but I just don't see it.

    Thank you for your help!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

 HTML5 Development Center



Recent Articles