Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Fancy box

  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    Fancy box

    I've got so much OLD JUNK here
    http://artdemo.tripod.com/illustrati...xFancyBox.html
    I cannot figure out where the blue box at top (over image) is coming from? It is complicated by TRIPOD scripts, but the blue box is there despite TRIPOD.

    This is my first try at implementing FANCY BOX. I guess it is a conflict with junky old CSS stylesheet attached to page (see http://artdemo.tripod.com/illustration/indexCSS.html). But I cannot find where the problem is originating from. Can anyone point me in the right direction?
    Last edited by waxdoc; 01-09-2012 at 12:32 AM. Reason: correct link

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    In this stylesheet http://artdemo.tripod.com/styles-scr...oralFFFAF0.css div.top is set to a certain width and height.

    Your other links doesn't work.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    waxdoc (01-09-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    thanks

    Thank you. I didn't see this and forgot it as there.

    Code:
    /* used CALLIHAN's "side" */
    #navLeft { z-index: 2; width: 200px; height: auto; padding: 0px; border: none; margin: 0;  color: #000033; background-color: #69c; text-align: center;
     } /* margin left/right "auto" to center ? */
    
    /* CALLIHAN Top banner bar formatting */ /*square buttons 176W x 155H */
    div.top { 
      position: absolute; top: 2px; left: 200px; z-index: 2; 
      width: 506px; height: 166px; 
      color: #ffffff; background: #69c; 
      border: 3px #fc0 outset; 
    /* Start box model hack */
      voice-family: "\"}\""; voice-family: inherit; width: 500px; height: 160px; /*IE padding & border bug */
    }

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    thanks again

    Thanks again re: links. I originally (a long time ago) was trying to "skip ads" by going to named anchor

    Code:
    <a name="top" id="top"> </a>
    <li id="home2"><a href="../indexRandom.html#top">Home 2</a></li>
    It may have worked once upon a time. Now it is acting funny so I might have to delete the #top in links. I added a "SKIP ADS" to page (which I need for the FANCY BOX to clear the Tripod ads).

    See how it works now (thanks to your help, "supreme master coder Aerospace Eng")

    http://artdemo.tripod.com/illustrati...exCSS.html#top

    and http://artdemo.tripod.com/illustrati...xFancyBox.html

    With those basic problems cleared, I can attempt to undeerstand and implememt FANCY BOX. As you can see, I just copied the demo code for starter. I'm wondering if it is possible to combune the "buttons" and the "thumbnails" and if such can be applied to a regular "clickable" slideshow and/or large holder image, such as http://www.auntnini.com/sketch/newRolls.html

    I have a lot of experimenting and learning to do.

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    navigation keys

    I would like to apply the Fancy Box "buttons" key press navigation to an ordinary "click-able" slideshow. For eample, http://www.auntnini.com/sketch/newRolls.html

    Is this code below where the keys are identified? If so, how can these keys be adapted to ordinary JavaScript?
    Code:
    			
    fixed: !$.browser.msie || $.browser.version > 6 || !document.documentElement.hasOwnProperty('ontouchstart'),
    			scrolling: 'auto', // 'auto', 'yes' or 'no'
    			wrapCSS: 'fancybox-default',
    
    			arrows: true,
    			closeBtn: true,
    			closeClick: false,
    			nextClick : false,
    			mouseWheel: true,
    			autoPlay: false,
    			playSpeed: 3000,
    
    			modal: false,
    			loop: true,
    			ajax: {},
    			keys: {
    				next: [13, 32, 34, 39, 40], // enter, space, page down, right arrow, down arrow
    				prev: [8, 33, 37, 38], // backspace, page up, left arrow, up arrow
    				close: [27] // escape key
    },
    Last edited by waxdoc; 01-14-2012 at 12:48 AM. Reason: add link

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    dead-end search results

    I must be searching for the wrong thing or looking in the wrong place. This is what I have so far:
    http://www.w3schools.com/jsref/event_onkeypress.asp
    Syntax: onkeypress="SomeJavaScriptCode"
    Supported by the following JavaScript objects: document, image, link, textarea
    Browser differences: Internet Explorer uses event.keyCode to retrieve the character that was pressed and Netscape/Firefox/Opera uses event.which.
    ==============
    http://api.jquery.com/keypress/
    .keypress( handler(eventObject) ) Returns: jQuery
    Description: Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.
    .keypress( [eventData], handler(eventObject) )
    eventData A map of data that will be passed to the event handler.
    handler(eventObject) A function to execute each time the event is triggered.
    This method is a shortcut for .bind("keypress", handler) in the first two variations, and .trigger("keypress") in the third.
    To determine which character was entered, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the character code.
    =================
    http://www.quirksmode.org/js/keys.html
    The two properties are keyCode and charCode. Put (too) simply, keyCode says something about the actual keyboard key the user pressed, while charCode gives the ASCII value of the resulting character. These bits of information need not be the same; for instance, a lower case 'a' and an upper case 'A' have the same keyCode, because the user presses the same key, but a different charCode because the resulting character is different.
    Explorer and Opera do not support charCode. However, they give the character information in keyCode, but only onkeypress. Onkeydown and -up keyCode contains key information.
    ============================
    http://www.javascriptkit.com/javatut...criptkey.shtml
    Keyboard related event handlers
    onkeypress: invokes JavaScript code when a key is pressed
    onkeydown: invokes JavaScript code when a key is held down (but not yet released)
    onkeyup: invokes JavaScript code when a key has been released after being pressed.
    These events can be binded to most elements on the page, though you'll probably be sticking to either the "document" element or form field elements in most cases, as appealing as having your script react to a keypress on a <h1> element is.
    To bind a keyboard event to an element, you can do so either inside your script, or directly inside the element's tag inside your HTML:
    ===============
    http://www.aspdotnetfaq.com/Faq/What...Up-events.aspx
    list of (almost) all JavaScript KeyCodes for Firefox and Internet Explorer

  • #7
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts
    Found this
    http://pauladamdavis.com/blog/2011/0...to-slide-show/
    Code:
    $(document).keydown(function(e){
         if (e.keyCode == 37 || e.keyCode == 38) { // Left or up keys 
            $("#prevLink").click();     }
         if (e.keyCode == 39 || e.keyCode == 40) { // Right or down keys
             $("#nextLink").click();
         } });


  •  

    Posting Permissions

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