Results 1 to 6 of 6

Thread: how to create flip page function

  1. #1
    Join Date
    Nov 2006
    Posts
    55
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default how to create flip page function

    Any idea how the flip page function below are being created? I mean is it possible/easy for one to do just using a set of source code? Any iput is appreciated. Thank you.

    https://www.kmart.com.au/catalogue/C...aunch|20081113

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    looks like they are taking the image of the next and previous pages and preloading them. Then using svg tags to hide them, when clicked using polygon divs to show them and rotate them specifically based on mouse movements or click which decide how much of the page is viewable and how much/fast to rotate it.

    Code:
    <svg:svg id="svgelement" width="674px" height="501px" viewBox="0 -61 674 501" style="display:none;position:absolute;top:-61px;left:0px;">
                                        <svg:g id="svgsaucer" transform="">
    		                            <svg:image id="SVGPageImageLeft" height="440" width="337" x="0" y="0" onclick="openZoom(evt)" />
    
                                        <svg:image id="SVGPageLeftGradient" x="270" y="-114" width="67" height="554" xlink:href="/Catalogue/GradientLoader.ashx?CatalogueID=41&amp;Dir=0" preserveAspectRatio="none" onclick="openZoom(evt)" />
                                        <svg:clipPath id="SVGnpriCP">
                                            <svg:polygon id="SVGnextPageRightImagePoly" />                        
                                        </svg:clipPath>
                                        <svg:image id="SVGnextPageLeftImage" y="440" x="674" width="337" height="440" transform="rotate(90)" onmousedown="nextpagemousedown(evt)"/>
                                        <svg:rect id="SVGNoNextPageRightImage" clip-path="url(#SVGnpriCP)" y="0" x="337" width="337" height="440" fill="#f0f0f0" style="visibility:hidden"/>
                                        <svg:image id="SVGnextPageRightImage" clip-path="url(#SVGnpriCP)" y="0" x="337" width="337" height="440"/>
                                        <svg:image id="SVGnextPageLeftGradient" 
                                            y="440" x="337" width="67" height="554" xlink:href="/Catalogue/GradientLoader.ashx?CatalogueID=41&amp;Dir=0" preserveAspectRatio="none" onmousedown="nextpagemousedown(evt)" />
                                        <svg:clipPath id="SVGpirCP">
    
                                            <svg:polygon id="SVGPageImageRightPoly" points="337,0 674,0 674,440 337,440"/>
                                        </svg:clipPath>
                                        <svg:image id="SVGPageImageRight" clip-path="url(#SVGpirCP)" y="0" x="337" width="337" height="440" 
                                            onclick="openZoom(evt)" />
                                         <svg:clipPath id="SVGprgCP">
                                                <svg:polygon id="SVGPageRightGradientPoly" points="0,0 674,0 674,440, 0,440"/>    
                                        </svg:clipPath>
                                        <svg:image id="SVGPageRightGradient" clip-path="url(#SVGprgCP)" x="337" y="-114" width="67" height="554" xlink:href="/Catalogue/GradientLoader.ashx?CatalogueID=41&amp;Dir=1" preserveAspectRatio="none" onclick="openZoom(evt)" />
                                        <svg:clipPath id="SVGtmCP">
                                            <svg:polygon id="SVGTopMaskPoly" />
    
                                        </svg:clipPath> 
                                        <svg:polygon id="SVGShadow" fill="black" fill-opacity=".5"/>
                                    </svg:g>
                                    <svg:image id="SVGTopMask" clip-path="url(#SVGtmCP)" y="-61" x="0" width="936" height="61"  preserveAspectRatio="xMidYMin slice"  />
                                    </svg:svg>
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. The Following User Says Thank You to BLiZZaRD For This Useful Post:

    jass (11-16-2008)

  4. #3
    Join Date
    Mar 2008
    Posts
    218
    Thanks
    7
    Thanked 19 Times in 19 Posts

    Default

    Quote Originally Posted by jass View Post
    Any idea how the flip page function below are being created? I mean is it possible/easy for one to do just using a set of source code? Any iput is appreciated. Thank you.

    https://www.kmart.com.au/catalogue/C...aunch|20081113
    When using IE I got an activeX warning, that for me would be a reason to avoid this site. So i would suggest go use javascript:
    http://www.dynamicdrive.com/dynamici...flexislide.htm

  5. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    ActiveX warnings make you not go to a site? Really? So Kmart is running scrupulous scripts? Based on your post I had to go test for myself. I had to dig the reserves for the warning (meaning I had to find out what it was 'cause I didn't get it)

    If you bothered to read your warning it would tell you the script in question (which is javascript, by the way) is using an activeX script that you have not yet turned on on your computer. The warning is stating that the page won't work correctly and to "click here" to activate the script.

    Following your mantra for browsing I would assume you don't get to view many sites, do you?
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  6. #5
    Join Date
    Mar 2008
    Posts
    218
    Thanks
    7
    Thanked 19 Times in 19 Posts

    Default

    I script my browsing, there are about 5 sites I actively use a browser. Warnings block my handling speed.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you do want to use a freely available script, the closest I know of is book flip:

    http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

    There is an advanced version that adds controls:

    http://www.burmees.nl/menu/bookextended.html

    These aren't quite as fancy but are free, and much easier to setup.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jass (11-16-2008)

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
  •