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
Printable View
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
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&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&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&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>
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:Quote:
Originally Posted by jass
http://www.dynamicdrive.com/dynamici...flexislide.htm
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? :p
I script my browsing, there are about 5 sites I actively use a browser. Warnings block my handling speed.
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.