SWF Basic Image Slider Causes "Blocked Script" Warning in IE
Hey Guys,
I just recently coded a basic image slider/slide show in Flash CS5. Bassicly, it's just a bunch of images that slide via motion tween in and out of view (Like on the right side of Pizzahut.com, my clients insperation) but, when published and thrown into my HTML, it causes Internet Explorer to give the "To Help Protect Your Security, Internet Explorer has prevented this webpage from running scripts or active X Controlls" and you have to click the little bar at the top and select "Allow Blocked COntent" for the slideshow to work. I specifically coded this show in flash (Published as an SWF) to avoid this warniong (As opposed to J-Query) and I have sites that I have made with similar SWF image sliders that don't through up this warning (http://www.grangerfun.com/pizza.asp) for example. Is there something I am doing wrong? A publish setting maybe? Thanks for your help!
when you test local files you'll often cross a security sandbox from a local file to an internet file. to resolve, either upload the file(s) to a server (so they're all in the internet sandbox) or change your local flash player settings: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.htm l
Similar Messages
-
Need help with widget loading problem. Using Nivo image slider within basic composition.
I am using a basic composition widget to display multiple Nivo image sliders. Each basic tab displays its own Nivo slider. Please reference http://penthouse.businesscatalyst.com/cocktails
The problem I am experiencing is when I click on a tab (ie: Whiskey) it displays the composition box containing the slider, but the slider is like it is stuck up in the top and it waits and then finally comes down and starts the Nivo slider after that. I just want the image slider to appear showing the first slide instead of transitioning it in. In the settings for the basic composition, the only transition that is selected is fade. Any ideas?No... Try this link: COCKTAILS
You should see this then click on whiskey -
Can't get image slider to work
Every image slider tutorial I do, I can't seem to get to work! I'm obviously doing something wrong!! Could someone please point out what it is please? I've been going onto CodePen > typing in responsive image slider > copying the html > creating a separate CSS and JS and linking to them. But when I run the page, nothing happens. What vital ingredient am I missing?
Untitled Document
Thanks.I agree with you pal - there's no point in trying to be clever if no-one can find the code.
If you want the slider you're talking about then copy the code below and paste into a dreamweaver document and browse - have fun and then go tell code pen they are a pile of shite.
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/MarcoGuglielmelli/pen/ogZWpv" />
<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
body {
background-color: #979797;
color: #fff;
margin: 0em;
padding: 0em;}
.page {
max-width: 640px;
margin: 0px auto 30px auto;}
.panel {
background-color: #fff;
color: #666;
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
overflow: auto;}
button {
border: none;}
/********** LOGO **********/
h1 {
text-align: center;
width: 200px;
height: 20px;
margin: 40px auto 40px auto;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
/********** TYPOGRAPHY **********/
body, button {
font-family: 'Jacques Francois', serif;}
h2, h3 {
font-weight: normal;
margin: 0em;}
h2 {
color: #666;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 230%;
line-height: 1em;
padding: 20px 0px 0px 20px;}
h3 {
font-size: 90%;
letter-spacing: 0.2em;}
p {
font-family: 'Quattrocento Sans', sans-serif;
line-height: 1.4em;}
a {
text-decoration: none;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
/***************** No JS ***************/
#billboard {text-align: center;}
.js-warning {display: none;}
.no-js .js-warning {
display: block;
border: 3px solid #fff;
text-align: center;
background-color: #fff;
color: #db5391;
padding: 10px;}
/********** SLIDER **********/
.slider {
max-width: 940px;
margin: 0px auto 30px auto;}
.slide-viewer {
position: relative; /* needed for IE7 */
overflow: hidden;
height: 430px;}
.slide-group {
width: 100%;
height: 100%;
position: relative;}
.slide {
width: 100%;
height: 100%;
display: none;
position: absolute;}
.slide:first-child {
display: block;}
/********** BUTTONS **********/
.slide-buttons {
text-align: center;}
.slide-btn {
border: none;
background: none;
color: #000;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}</style></head><body>
<header><h1>Responsive Slider</h1></header>
<section>
<div class="slider">
<div class="slide-viewer">
<div class="slide-group">
<div class="slide slide-1">
<img src="http://javascriptbook.com/code/c11/img/slide-1.jpg" alt="No two are the same" />
</div>
<div class="slide slide-2">
<img src="http://javascriptbook.com/code/c11/img/slide-2.jpg" alt="Monsieur Mints" />
</div>
<div class="slide slide-3">
<img src="http://javascriptbook.com/code/c11/img/slide-3.jpg" alt="The Flower Series" />
</div>
<div class="slide slide-4">
<img src="http://javascriptbook.com/code/c11/img/slide-4.jpg" alt="Salt o' The Sea" />
</div>
</div>
</div>
<div class="slide-buttons"></div>
</div>
</section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script>
$('.slider').each(function () {
var $this = $(this);
var $group = $this.find('.slide-group');
var $slides = $this.find('.slide');
var buttonArray = [];
var currentIndex = 0;
var timeout;
function move(newIndex) {
var animateLeft, slideLeft;
advance();
if ($group.is(':animated') || currentIndex === newIndex) {
return;
buttonArray[currentIndex].removeClass('active');
buttonArray[newIndex].addClass('active');
if (newIndex > currentIndex) {
slideLeft = '100%';
animateLeft = '-100%';
} else {
slideLeft = '-100%';
animateLeft = '100%';
$slides.eq(newIndex).css({
left: slideLeft,
display: 'block'
$group.animate({ left: animateLeft }, function () {
$slides.eq(currentIndex).css({ display: 'none' });
$slides.eq(newIndex).css({ left: 0 });
$group.css({ left: 0 });
currentIndex = newIndex;
function advance() {
clearTimeout(timeout);
timeout = setTimeout(function () {
if (currentIndex < $slides.length - 1) {
move(currentIndex + 1);
} else {
move(0);
}, 4000);
$.each($slides, function (index) {
var $button = $('<button type="button" class="slide-btn">•</button>');
if (index === currentIndex) {
$button.addClass('active');
$button.on('click', function () {
move(index);
}).appendTo('.slide-buttons');
buttonArray.push($button);
advance();
//@ sourceURL=pen.js
</script>
<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html> -
Preloader Freezes, then 'Unresponsive Script' Warning
Hi folks-
This is my first Edge Animate project.
I have created a simple cross-fading 'slide show' with moving text overlays using the most recent upgrade of Edge Animate 3.0.0. 8 slides. The stage isn't that huge: 748x334 pixels. There is one .png overlay with a transparent interior to create the framing; the 8 slides revealed underneath are all Q50 'saved for web' jpgs averaging under 40kB each. I have used one of the simple preloaders in the included library and published for web.
My problem presents regardless of which browser I use (tried the latest versions of Firefox, IE, Safari, Chrome and Opera), and whether I run the published .html solo (hosted on my server), or embedded in the final web page it's destined for. Also, I get the same result when I use Ctrl-Enter from within Edge Animate to preview in my default browser (Firefox).
The problem is that the preloader gif only runs briefly, then freezes, followed by up to a minute of waiting (sometimes even more) before the first slide appears and the animation begins. Solo'd, it's just the frozen animated gif during the wait. Embedded in the final web page, the whole page, including navigation, is unresponsive until after the wait is over.
Depending on the browser, I will get various warnings. In Firefox I get the 'Unresponsive Script' warning and it identifies the unresponsive scripts as:
http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4
Or
http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:5
Or
http://animate.adobe.com/runtime/3.0.0/edge.3.0.0.min.js:166
Or
http://animate.adobe.com/runtime/3.0.0/edge.3.0.0.min.js:45
Sometimes I've selected 'cancel script'; sometimes I've selected 'wait for script to finish'; it doesn't seem to matter which one I select. Sometimes it works immediately after making either selection; In some cases I get the warning message 2-3 times before it finally works.
I've tried both hosting the runtime files myself and on Adobe CDN. I've also tried 'Immediate' and 'Polite' for the preloader. It makes no difference.
I've also disabled all add-ons in Firefox and the result is the same, though it may take less time to recover from the freeze.
I ran a speed test and my current download speed is 13mbps, so I can't believe my paltry image files are taking this long to load...and even if they were, shouldn't the preloader continue to animate during the load?
Has anyone else seen this behavior? I sure am hoping for a solution~!
When I created something similar to this in Flash a couple years ago, it didn't even need a preloader it loaded up and ran so fast...
Quite Puzzled,
bOBhi bOB,
I know your post has been long time ago, however recently I'm having the same issue you had, except the errors messages you're getting, my preloader stays at the same point unless I hit reload page on the browser and finally loads it. Are you still having the preloader issue even with the most recent Edge Animate version?
Thanks,
Paco -
== Issue
==
I have another kind of problem with Firefox
== Description
==
Every time I open a site I get the "unresponsive script" warning. Then randomly throughout my web surfing. It's a constant occurrence. In fact, I've yet to go a single session without receiving a warning. For several days I was logging each message by using print screen, then saving under paint. If these are required to rectify this issue, I'd gladly send them.
== This happened
==
Every time Firefox opened
== a few months ago
==
== Troubleshooting information
==
Application Basics
Name Firefox
Version 3.6.3
Profile Directory
Open Containing Folder
Installed Plugins
about:plugins
Build Configuration
about:buildconfig
Extensions
Name
Version
Enabled
ID
Java Console 6.0.17 true
Microsoft .NET Framework Assistant 0.0.0 true {20a82645-c095-46ed-80e3-08825760534b}
Organize Status Bar 0.6.4 true {35106bca-6c78-48c7-ac28-56df30b51d2c}
Toolbar Buttons 0.6.0.8 true {03B08592-E5B4-45ff-A0BE-C1D975458688}
Statusbar Date() 1.5.0 true [email protected]
1-Click YouTube Video Downloader 1.4 true [email protected]
Download Statusbar 0.9.6.8 true
Exit Button Firefox 0.4.1 true {94B08592-E5B4-45ff-A0BE-C1D975458688}
Webmail Ad Blocker 3.1.2 true [email protected]
Flashblock 1.5.13 true {3d7eb24f-2740-49df-8937-200b1cc08f8a}
Ad blocker 0.6.7 true {4DC70064-89E2-4a55-8FC6-E8CDEAE3612C}
IE Tab Plus 1.91.20100528 true [email protected]
PhishTank SiteChecker 4.2.3 true {8bc5b5eb-0ec4-46ed-a024-ace8a3032888}
Privacy Plus 1.0.1 true [email protected]
QuickRestart 1.1.6 true
Unsorted Bookmarks Folder Menu 2.0 true UnsortedBookmarksMenu@alice
Update Notifier 0.1.5.5 true {95f24680-9e31-11da-a746-0800200c9a66}
Browser Backgrounds 0.6.5 true {3e0c7f3a-3f50-4730-beb5-4a9a10e2831c}
CS Lite 1.4 true {00084897-021a-4361-8423-083407a033e0}
Vacuum Places Improved 1.1 true [email protected]
Photobucket Uploader 1.3 true [email protected]
Fotofox 1.9.1 true [email protected]
FireDownload 2.0.1 true [email protected]
Theme Font Size Changer 0.1 true
Fierr 0.8.1 true {2E481B23-66AC-313F-D6A8-A81DDDF26249}
Modified Preferences
Name
Value
accessibility.typeaheadfind.flashBar 0
browser.history_expire_days 0
browser.history_expire_days.mirror 180
browser.history_expire_days_min 1
browser.places.importBookmarksHTML false
browser.places.smartBookmarksVersion 2
browser.startup.homepage http://my.yahoo.com/
browser.startup.homepage_override.mstone rv:1.9.2.3
dom.disable_window_move_resize true
extensions.lastAppVersion 3.6.3
font.minimum-size.x-western 13
font.name.monospace.x-western Comic Sans MS
font.name.sans-serif.x-western Comic Sans MS
font.name.serif.x-western Comic Sans MS
font.size.fixed.x-western 14
font.size.variable.x-western 14
keyword.URL http://supertoolbar.ask.com/redirect?client=ff&src=kw&tb=WBR&o=13993&locale=en_US&q=
network.cookie.blockFutureCookies true
network.cookie.lifetimePolicy 2
network.cookie.prefsMigrated true
places.last_vacuum 1272011400
print.print_printer Dell Photo AIO Printer 944
print.printer_Dell_Photo_AIO_Printer_944.print_bgcolor false
print.printer_Dell_Photo_AIO_Printer_944.print_bgimages false
print.printer_Dell_Photo_AIO_Printer_944.print_command
print.printer_Dell_Photo_AIO_Printer_944.print_downloadfonts false
print.printer_Dell_Photo_AIO_Printer_944.print_edge_bottom 0
print.printer_Dell_Photo_AIO_Printer_944.print_edge_left 0
print.printer_Dell_Photo_AIO_Printer_944.print_edge_right 0
print.printer_Dell_Photo_AIO_Printer_944.print_edge_top 0
print.printer_Dell_Photo_AIO_Printer_944.print_evenpages true
print.printer_Dell_Photo_AIO_Printer_944.print_footercenter
print.printer_Dell_Photo_AIO_Printer_944.print_footerleft &T
print.printer_Dell_Photo_AIO_Printer_944.print_footerright
print.printer_Dell_Photo_AIO_Printer_944.print_headercenter &U
print.printer_Dell_Photo_AIO_Printer_944.print_headerleft &D
print.printer_Dell_Photo_AIO_Printer_944.print_headerright
print.printer_Dell_Photo_AIO_Printer_944.print_in_color true
print.printer_Dell_Photo_AIO_Printer_944.print_margin_bottom 0.5
print.printer_Dell_Photo_AIO_Printer_944.print_margin_left 0.300000011920929
print.printer_Dell_Photo_AIO_Printer_944.print_margin_right 0.300000011920929
print.printer_Dell_Photo_AIO_Printer_944.print_margin_top 0.5
print.printer_Dell_Photo_AIO_Printer_944.print_oddpages true
print.printer_Dell_Photo_AIO_Printer_944.print_orientation 0
print.printer_Dell_Photo_AIO_Printer_944.print_pagedelay 500
print.printer_Dell_Photo_AIO_Printer_944.print_paper_data 1
print.printer_Dell_Photo_AIO_Printer_944.print_paper_height 11.00
print.printer_Dell_Photo_AIO_Printer_944.print_paper_size_type 0
print.printer_Dell_Photo_AIO_Printer_944.print_paper_size_unit 0
print.printer_Dell_Photo_AIO_Printer_944.print_paper_width 8.50
print.printer_Dell_Photo_AIO_Printer_944.print_reversed false
print.printer_Dell_Photo_AIO_Printer_944.print_scaling 1.00
print.printer_Dell_Photo_AIO_Printer_944.print_shrink_to_fit true
print.printer_Dell_Photo_AIO_Printer_944.print_to_file false
print.printer_Dell_Photo_AIO_Printer_944.print_unwriteable_margin_bottom 0
print.printer_Dell_Photo_AIO_Printer_944.print_unwriteable_margin_left 0
print.printer_Dell_Photo_AIO_Printer_944.print_unwriteable_margin_right 0
print.printer_Dell_Photo_AIO_Printer_944.print_unwriteable_margin_top 0
privacy.clearOnShutdown.cache false
privacy.clearOnShutdown.offlineApps true
privacy.clearOnShutdown.passwords true
privacy.item.extensions-privacyplus true
privacy.popups.showBrowserMessage false
privacy.sanitize.migrateFx3Prefs true
privacy.sanitize.sanitizeOnShutdown true
privacy.sanitize.timeSpan 0
security.warn_viewing_mixed false
security.warn_viewing_mixed.show_once false
== Firefox version
==
3.6.3
== Operating system
==
Windows XP
== User Agent
==
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 FireDownload/2.0.1 Firefox/3.6.3
== Plugins installed
==
*-IE Tab Plug-in for Mozilla/Firefox
*1.9.0009.1
*Default Plug-in
*Adobe PDF Plug-In For Firefox and Netscape "9.3.2"
*The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
*Shockwave Flash 10.0 r42
*iTunes Detector Plug-in
*Version 1.0.5, copyright 1996-2010 The VideoLAN Teamhttp://www.videolan.org/
*Next Generation Java Plug-in 1.6.0_18 for Mozilla browsers
*Npdsplay dllYou might have a bad add-on, or you could have a virus on your computer. Try starting [http://support.mozilla.com/en-US/kb/Safe+Mode Safe Mode] and check "Disable all add-ons". If that works, it's a faulty add-on. Or if it's a virus, download [http://free.avg.com AVG Free] and scan your computer.
-
Hi Guys
I would like to have an image slider (with each image the same grey gradient background but different foreground) on my website in the banner: www.bmgraphics.be
Which one would be best, and what are the do's and don'ts?
I've seen this template: does anyone know where to get the slider part? http://themeforest.net/item/kallyas-responsive-multipurpose-wordpress-theme/full_screen_pr eview/4091658
I tried the nivo slider but the images kept blocking and it really looked bad
http://themeforest.net/item/kallyas-responsive-multipurpose-wordpress-theme/full_screen_pr eview/4091658
Thanks for your help guys!
Regards
BobI used this basic jQuery slider on one of my web sites.
http://basic-slider.com/
Apply background images to #slider CSS code.
Insert transparent PNG images into the #slider div.
To make transparent PNGs, use Photoshop or Fireworks and a transparent workspace -- denoted by the checkerboard pattern. Save for web as PNG-24 with transparency. See screenshot from Photoshop.
Nancy O. -
Excessive use of recovery slider causes banding.
Has anyone else noticed this, the situation is subject back lit (form window with white blinds) with fill flash. Using the exposure slider to increase exposure and the recovery slider near maximum to take back down the blinds causes blocks of solid white to appear in parts of the translucent blind in images exported. This occurs in Tiff both 16 & 8 bit as well as Jpgs. It's also a problem on 2 systems PPC G5 and MBP. It does not show on the viewer or full screen mode when editing but appears in the output files.
Reducing the Recovery to 3/4 seems to make it disappear. It caused me some problems yesterday when outputting some tiffs and required some rework to get things right. JFYITop 1/3rd in portrait or last 1/3 L to R in landscape produces a band of more solid white. Obviously a problem and now I'm more cautious seeing as you have the same problem. Granted by judicious amounts of slider applied it causes no problem but there is no indication of where or when this will appear, on screen gives no indication, it only seems to appear in printing or output.
-
Style Image Slider to include HTML text: How?
I am trying to insert an image slider onto my page. So far, I have tried a few different sliders with some issues.
Does anyone know
A good Jquery Image Slider that allows for HTML text beside the image on a slide?? (Like MSN Homepage)--No Caption or Overlay. Looking for White background with linkable HTML Text on left (40%) and Picture on Right (60%)-all on one slide. Cycle through four similar slides.
I am assuming the solution is not so much the slider, but has to do with creating a seperate div or rule / class and applying?
Thank you for any help.I would approach it like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document with Cycle2</title>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Cycle2 Plugin Script-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
.cycle-slideshow {
margin: 25px auto;
border: 1px solid silver;
overflow: hidden; /**float containment**/
width: 80%; /**adjust width of container as required**/
.cycle-slideshow img {
width: 60%;
float: left;
.cycle-slideshow h3 {
float: right;
width: 40%;
font-size: 26px;
color: red
.cycle-slideshow p {
clear: right;
float: right;
width: 40%;
font-size: 16px;
.center {text-align:center}
/* Special Rules for tablets, mobiles */
@media only screen and (max-width: 768px) {
.cycle-slideshow { width: 98% }
.cycle-slideshow img {
width: 100%;
display: block;
float: none;
.cycle-slideshow h3 {
display: block;
float: none;
font-size: 20px;
width: 100%;
.cycle-slideshow p {
display: block;
float: none;
font-size: 14px;
width: 100%;
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a>
Responsive Slideshow with text</h1>
<!--begin slideshow-->
<div class="cycle-slideshow"
data-cycle-pause-on-hover="true"
data-cycle-timeout="2000"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-slides="> div"
>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<!--end slideshow-->
</div>
<!--prev, next links-->
<div class="center">
<a href=# id="prev">Prev</a> | <a href=# id="next">Next</a>
</div>
</body>
</html>
Nancy O. -
Help needed with spry image slide show
Im new to dw and am currently building a site for my buisness. I installed a spry image slide show and it works fine in live view but when I view it on the web
it was looking for sever .js files. I then checked out the spry forums and noticed that it seems to be a common problem. I tried removing the ui1.7 file from the server and reloading,tried removing from local and remote and reloading, tried to change the line <script.src=spry-ui-1.7 etc. to the adobe site as per gramps advise to another having the same issue. Now when I view on the web the slideshow wheel keeps turning but images donot apear. Im lost and can use some help, enclosed is my code also sight is www.patsiga.net
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>pats iga supermarket</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #AF692A;
</style>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #frontpageslideshow */
#frontpageslideshow {
width: 960px;
margin: 0px 0px 0px 0px;
border: solid 0px #aaaaaa;
background-color: #FFFFFF;
padding-top: 0px;
#frontpageslideshow .ISSName {
top: -24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: uppercase;
color: #AAAAAA;
#frontpageslideshow .ISSSlideTitle {
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
overflow: hidden;
color: #AAAAAA;
text-transform: none;
#frontpageslideshow .ISSClip {
height: 361px;
margin: 0 0px 0px 0px;
border: solid 0px #ffffff;
background-color: #ffffff;
#frontpageslideshow .ISSControls {
top: 0px;
height: 361px;
#frontpageslideshow .FilmStrip {
height: 0px;
background-color: #CCCCCC;
#frontpageslideshow .FilmStripPreviousButton, #frontpageslideshow .FilmStripNextButton {
width: 10px;
height: 0px;
#frontpageslideshow .FilmStripTrack {
height: 0px;
#frontpageslideshow .FilmStripContainer {
height: 0px;
#frontpageslideshow .FilmStripPanel {
height: 0px;
padding-left: 10px;
margin-right: 0px;
#frontpageslideshow .FilmStripPanel .ISSSlideLink {
margin-top: 10px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
#frontpageslideshow .FilmStripPanel .ISSSlideLinkRight {
border: solid 1px #AAAAAA;
width: 56px;
height: 47px;
margin: 4px 4px 4px 4px;
#frontpageslideshow .FilmStripCurrentPanel .ISSSlideLink {
background-color: #ffffff;
border-color: #000000;
#frontpageslideshow .FilmStripCurrentPanel .ISSSlideLinkRight {
border-color: #AAAAAA;
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141543" binding="#frontpageslideshow" />
</oa:widgets>
-->
</script>
</head>
<body>
<div class="container">
<div class="header"><!-- end .header --><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="pats_logo" /></a><img src="images/H1180T2.jpg" width="699" height="120" alt="header_graphic" /></div>
<div class="container">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="weekly_ad.html" title="weekly ad">Weekly ad</a></li>
<li><a href="recepies.html" title="recepies">Recepies</a></li>
<li><a href="entertainment.html" title="entertaining" class="MenuBarItemSubmenu">Entertaining</a>
<ul>
<li><a href="bakery_brochure.html" title="bakery_brochure">Bakery brochure</a></li>
<li><a href="deli_platters.html" title="Deli_platters">Deli platters</a></li>
<li><a href="catering_menu.html" title="Catering_menu">Catering Menu</a></li>
</ul>
</li>
<li><a href="pats_best.html" title="pats best">Pat's Best</a></li>
<li><a href="organics.html" title="organics">Organics</a></li>
<li><a href="gift_cards.html" title="gift cards">Gift Cards</a></li>
<li><a href="#" title="departments" class="MenuBarItemSubmenu">Departments</a>
<ul>
<li><a href="meats.html" title="dept_meats">Meats</a></li>
<li><a href="seafood.html" title="dept_seafood">Seafood</a></li>
<li><a href="deli.html" title="Dept_deli">Deli</a></li>
<li><a href="prep_foods.html" title="Dept_prep_foods">Prepared Foods</a></li>
<li><a href="produce.html" title="dept_produce">Produce</a></li>
<li><a href="bakery.html" title="Dept_bakery">Bakery</a></li>
</ul>
</li>
</ul>
<p> </p>
<ul id="frontpageslideshow" title="">
<li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
<li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
<li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
<li><a href="images/roast.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
<li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141543: #frontpageslideshow
var frontpageslideshow = new Spry.Widget.ImageSlideShow("#frontpageslideshow", {
widgetID: "frontpageslideshow",
widgetClass: "BasicSlideShowFS",
injectionType: "replace",
autoPlay: true,
displayInterval: 4500,
transitionDuration: 2000,
componentOrder: ["name", "title", "view", "controls", "links"],
sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
TFSP: { pageIncrement: 4, wraparound: true }
// EndOAWidget_Instance_2141543
</script>
<p>Since this is a one-column layout, the .content is not floated. </p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<!-- end .content --></div>
<div class="footer">
<p><a href="about_us.html" title="about_us">About Us</a><a href="#"> </a> <a href="employment.html" title="employment">Employment</a> <a href="store_info.html" title="store_info"> Store Info.</a> <a href="#" title="contact_us">Contact Us</a> <a href="terms_of_use.html" title="terms_of_use">Terms of Use</a> <a href="privacy.html" title="Privacy_policy"> Privacy Policy</a><br />
©2011 Pat's IGA <br />
</p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>Your spry assets folder MUST be in the same folder as that of your webpage with the slideshow (html, php... whatever)
Check your folder configuration on the server by clicking on the "Remote Button" on the DW Assets Tab.
Example 1: This will not work:
WEBPAGE HERE: /server/public/myfolder/slideshow.html
SPRY ASSETS HERE: /server/public/SpryAssets/....your javascript files
Example 2: This will work:
WEB PAGE HERE: /server/public/myfolder/slideshow.html
SPRY ASSETS HERE: /server/public/myfolder/SpryAssets/....your javascript files
Hope this helps. -
Hello,
I just bought a CSS3 image slider from envato marketplace and I think I did everyting as the creator explained in the read me file of how to implement it in your source code. But when I view it in a browser, I don't see any image, its just blank. The images are in the root folder. I tried alot but the only thing I see is blank images. Here's my whole html. You can skip the first html part. Is there anyone who had the same problem once or knows what the problem is? Thanks in advance
<!doctype html>
<html>
<head>
<meta name="description" content="Buitengesloten of ingebroken? Of gewoon toe aan een nieuw slot? Kan allemaal. Bel ons en we komen zo snel mogelijk naar u toe."/>
<meta property="og:description" content="Buitengesloten of ingebroken? Of gewoon toe aan een nieuw slot? Kan allemaal. Bel ons en we komen zo snel mogelijk naar u toe."/>
<meta charset="utf-8">
<title>Onze foto impressie</title>
<link href="css/general.css" rel="stylesheet" type="text/css">
<style type="text/css">
#header {
background-color: #FFFFFF;
text-align: right;
height: 200px;
margin-right: auto;
margin-left: auto;
padding-top: 5%;
padding-right: 20%;
font-size: 30px;
#page {
font-family: arial, tahoma, verdana;
font-size: 12px;
line-height: 1.5em;
color: #000000;
text-align: left;
float: left;
margin-right: auto;
margin-left: 13%;
margin-top: 40px;
padding-left: 20px;
background-color: #FFFFFF;
padding-right: 20px;
border-top: 1px solid #E9E9E9;
font-style: normal;
font-weight: 400;
min-height: 400px;
max-width: 700px;
padding-top: 20px;
padding-bottom: 20px;
clear: both;
#mainnav {
font-family: arial, tahoma, verdana;
font-size: 16px;
color: #000000;
margin-right: auto;
margin-left: auto;
background-color: #BDE1E8;
#mainnav ul {
font-family: arial, tahoma, verdana;
list-style-type: none;
margin-left: 10%;
margin-right: auto;
#mainnav ul li a {
font-family: arial, tahoma, verdana;
display: block;
padding-top: 10px;
padding-bottom: 10px;
float: left;
font-size: 16px;
background-color: #9B9B9B;
color: #FFFFFF;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
font-style: normal;
font-weight: 400;
#mainnav a:hover, #mainnav a:active ,#mainnav a:focus , #mainnav a.thispage {
font-family: arial, tahoma, verdana;
background-color: #1B1B1B;
font-style: normal;
font-weight: 400;
h1, h2 {
font-size: 20px;
.zoeken {
position: relative;
top: 25px;
left: 40px;
-webkit-transition: all 0s ease 0s;
-o-transition: all 0s ease 0s;
transition: all 0s ease 0s;
color: #151515;
.zoeken:focus {
width: 225px;
border-color: #150CD5;
.glas {
position: relative;
left: 25px;
top: 3px;
#search {
position: relative;
left: 50px;
top: 25px;
color: #0D0D0D;
.tel {
position: relative;
left: 552px;
top: 0.1px;
</style>
<style type="text/css">
body {
background-color: #ffffff;
</style>
<style type="text/css">
#footer {
font-family: arial, tahoma, verdana;
font-size: 12px;
line-height: 20px;
color: #000000;
background-color: #FFFFFF;
text-align: left;
float: left;
margin-left: 15%;
margin-top: 25px;
clear: left;
#footer ul {
list-style-type: none;
float: left;
text-align: left;
#footer ul li a {
font-family:arial, tahoma, verdana;
font-size: 12px;
font-weight: normal;
text-decoration: underline;
text-align: left;
#footer a:hover , #footer a:active, #footer a:focus, #footer a:visited{
color: #000000;
text-decoration: underline;
</style>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
.kolom {
font-family: arial, tahoma, verdana;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
float: left;
width: 120px;
margin-right: 25px;
margin-left: 25px;
background-color: #FFFFFF;
text-align: center;
margin-top: 10px;
border-right: 1px solid #000000;
.kolom1 {
font-family: arial, tahoma, verdana;
width: 200px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
float: left;
width: 200px;
margin-right: 25px;
margin-left: 25px;
background-color: #FFFFFF;
text-align: center;
margin-top: 10px;
border-right-color: #000000;
border-right-width: 1px;
border-right-style: solid;
font-size: 12px;
input::-webkit-input-placeholder {
color: #161616;
input::-moz-placeholder {
color: #161616;
input:-moz-placeholder { /* Older versions of Firefox */
color: #161616;
input:-ms-input-placeholder {
color: #161616);
.kolom1 a {
font-size: 10px;
color: #000000;
padding: 0;
margin: 0;
body {
background-color: #FFFFFF;
#wrap {
display: block;
height: auto;
width: 620px;
margin: 150px auto 0 auto;
border: 10px solid #fff;
position: relative;
#slideshow {
overflow: hidden;
#slideshow ul {
list-style-type: none;
height: 100%;
width: 500%; /*5 images by 100%. If you use 6 images you have to change the witdh into 600% */
position: relative;
left: 0px;
-webkit-transition: left 1s;
-moz-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
#slideshow ul li {
width: 20%; /*100% per 5 images. */
height: 320px;
float: left;
position: relative;
#wrap input[type=radio] {
position: absolute;
visibility: hidden;
#wrap label:not(.arrows):not(.show-description-label) {
position: absolute;
left: 50%;
top: 360px;
width: 11px;
height: 11px;
background-image: -moz-linear-gradient(top, #6dbfe8, #068ccf);
background-image: -o-linear-gradient(top, #6dbfe8, #068ccf);
background-image: -webkit-linear-gradient(top, #6dbfe8, #068ccf);
background-image: linear-gradient(top, #6dbfe8, #068ccf);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
#wrap label:not(.arrows):not(.show-description-label):hover {
background-image: -moz-linear-gradient(top, #B0E5FF, #068ccf);
background-image: -o-linear-gradient(top, #B0E5FF, #068ccf);
background-image: -webkit-linear-gradient(top, #B0E5FF, #068ccf);
background-image: linear-gradient(top, #B0E5FF, #068ccf);
box-shadow: #fff 0 0px 6px;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
#wrap input[type=radio]#button1:checked~label[for=button1] {
background: #fff;
#wrap input[type=radio]#button2:checked~label[for=button2] {
background: #fff;
#wrap input[type=radio]#button3:checked~label[for=button3] {
background: #fff;
#wrap input[type=radio]#button4:checked~label[for=button4] {
background: #fff;
#wrap input[type=radio]#button5:checked~label[for=button5] {
background: #fff;
#wrap input[type=radio]#button1:checked~#slideshow ul { left: 0 }
#wrap input[type=radio]#button2:checked~#slideshow ul { left: -100% }
#wrap input[type=radio]#button3:checked~#slideshow ul { left: -200% }
#wrap input[type=radio]#button4:checked~#slideshow ul { left: -300% }
#wrap input[type=radio]#button5:checked~#slideshow ul { left: -400% }
#wrap label[for=button1] { margin-left: -40px }
#wrap label[for=button2] { margin-left: -20px }
#wrap label[for=button3] { margin-left: 0; }
#wrap label[for=button4] { margin-left: 20px }
#wrap label[for=button5] { margin-left: 40px }
label.arrows {
position: absolute;
top: 50%;
margin-top: -50px;
height: 80px;
display: none;
opacity: 0.5;
cursor: pointer;
border-radius: 3px;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
label.arrows:hover {
opacity: 1;
background: #666;
input[type=radio]#button1:checked~.arrows#arrow-2, input[type=radio]#button2:checked~.arrows#arrow-3, input[type=radio]#button3:checked~.arrows#arrow-4, input[type=radio]#button4:checked~.arrows#arrow-5 {
right: -65px;
display: block;
input[type=radio]#button2:checked~.arrows#arrow-1, input[type=radio]#button3:checked~.arrows#arrow-2, input[type=radio]#button4:checked~.arrows#arrow-3, input[type=radio]#button5:checked~.arrows#arrow-4 {
display: block;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
input[type=radio]#button2:checked~.arrows#arrow-1 { left: -25px }
input[type=radio]#button3:checked~.arrows#arrow-2 { left: -45px }
input[type=radio]#button4:checked~.arrows#arrow-3 { left: -65px }
input[type=radio]#button5:checked~.arrows#arrow-4 { left: -85px }
</style>
</head>
<body>
<div id="header"><img src="afbeeldingen/header8.jpg" width="630" height="205" alt=""/></div>
<div id="mainnav">
<ul>
<li><a href="index.html" class="thispage">Home</a></li>
<li><a href="onzediensten.html">Onze diensten</a></li>
<li><a href="tarieven.html">Tarieven</a></li>
<li><a href="offerteaanvraag.html">Offerte aanvragen</a></li>
<li><a href="overons.html">Over ons</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="page">
<div id="wrap">
<input type="radio" id="button1" name="buttons" checked="checked"/>
<label for="button1"></label>
<input type="radio" id="button2" name="buttons"/>
<label for="button2"></label>
<input type="radio" id="button3" name="buttons"/>
<label for="button3"></label>
<input type="radio" id="button4" name="buttons"/>
<label for="button4"></label>
<input type="radio" id="button5" name="buttons"/>
<label for="button5"></label>
<label for="button1" class="arrows" id="arrow-1">
<img src="images/arrow.png" />
</label>
<label for="button2" class="arrows" id="arrow-2">
<img src="images/arrow.png" />
</label>
<label for="button3" class="arrows" id="arrow-3">
<img src="images/arrow.png" />
</label>
<label for="button4" class="arrows" id="arrow-4">
<img src="images/arrow.png" />
</label>
<label for="button5" class="arrows" id="arrow-5">
<img src="images/arrow.png" />
</label>
<div id="slideshow">
<ul>
<li id="slide1">
<img src="images/1.png" />
</li>
<li id="slide2">
<img src="images/2.png" />
</li>
<li id="slide3">
<img src="images/3.png" />
</li>
<li id="slide4">
<img src="images/4.png" />
</li>
<li id="slide5">
<img src="images/5.png" />
</li>
</ul>
</div>
</div>
</div>
</body>
</html>Hi Davidoff,
Glad to know that you managed to solve your problem. It will be helpful for other users if you post your solution here.
Thanks,
Preran -
I want to see the full size of the .swf on the slide in editing view, not just the thumbnail
Hello!
I have a very nice PPT that I created and I've tried everthing to bring the files in to get the best looking quality = not easy.
What I found to the be the best thing is to publish the PPT file to Presenter and then you have a .swf of each slide which looks really clear!
The problem is, I want to use those images as my slide layouts and then add a few Captivate things from there. Problem - the .swf files appear in the really small thumbnail view in the editing mode of Catpivate!! How can I view them in their actual size, like how you view a JPG or something in Captivate.
THANKS!!
~LKHi there
Take a look at the link below:
Click here to view
Cheers... Rick
Helpful and Handy Links
Captivate Wish Form/Bug Reporting Form
Adobe Certified Captivate Training
SorcererStone Blog
Captivate eBooks -
How to make an image slide/swipe effect like in #selfie
Please see http://forums.adobe.com/thread/1444012 - a question (it was mentioned there that AE will do better for what I want to do so I am posting the link here)
What I want to do is to replicate the image slide/zoom/swipe that you can see in the video.
Can you please help me get started on the right path? I am new in AE and need a bit of a start - i.e. if you were to do it, what technique would you approach it with?
I can probably manage to do one or two manually, but my issue is that there are so many (similar) effects and I don't want this video to become a daunting chore, so looking for a way to do this very easily somehow.
And this is why I am posting - to hopefully find the technique to do this effect right and a do it lot without realizing it is too difficult and giving up ...!Thanks
but I'm sorry .. is there a good tutorial I can read on this? I am not verse on basics of AE. I have been working mostly with Premiere.
I will appreciate some direction even if it's basics. -
Having trouble with spry image slide show
Im new to dw and i inserted a image slide show into my index.htm file, it works fine when i preview it in dw cs5.5. When I try it on a web browser I get a dialog box that says that the spry panel selector .js requires spry widget.js and continues thru several other dialog boxes until my website loads only to see my image slideshow as a list. Im not sure if its in the code or the support files can anyone help? I would greatly appreciate it if someone can set me on the right path with this, Thank you in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pats IGA Supermarket</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #9D5F16;
</style>
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #frontpageslideshow */
#frontpageslideshow {
width: 951px;
margin: 0px 0px 0px 0px;
border: solid 0px #aaaaaa;
background-color: #FFFFFF;
padding-top: 0px;
#frontpageslideshow .ISSName {
top: -24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: uppercase;
color: #AAAAAA;
#frontpageslideshow .ISSSlideTitle {
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
overflow: hidden;
color: #AAAAAA;
text-transform: none;
#frontpageslideshow .ISSClip {
height: 361px;
margin: 0 0px 0px 0px;
border: solid 0px #ffffff;
background-color: #ffffff;
#frontpageslideshow .ISSControls {
top: 0px;
height: 361px;
#frontpageslideshow .FilmStrip {
height: 0px;
background-color: #CCCCCC;
#frontpageslideshow .FilmStripPreviousButton, #frontpageslideshow .FilmStripNextButton {
width: 10px;
height: 0px;
#frontpageslideshow .FilmStripTrack {
height: 0px;
#frontpageslideshow .FilmStripContainer {
height: 0px;
#frontpageslideshow .FilmStripPanel {
height: 0px;
padding-left: 10px;
margin-right: 0px;
#frontpageslideshow .FilmStripPanel .ISSSlideLink {
margin-top: 10px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
#frontpageslideshow .FilmStripPanel .ISSSlideLinkRight {
border: solid 1px #AAAAAA;
width: 56px;
height: 47px;
margin: 4px 4px 4px 4px;
#frontpageslideshow .FilmStripCurrentPanel .ISSSlideLink {
background-color: #ffffff;
border-color: #000000;
#frontpageslideshow .FilmStripCurrentPanel .ISSSlideLinkRight {
border-color: #AAAAAA;
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141543" binding="#frontpageslideshow" />
</oa:widgets>
-->
</script>
</head>
<body>
<div class="container">
<div class="header"><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="logo" /></a><img src="images/topheader.jpg" width="701" height="136" alt="header_logo" /><!-- end .header --></div>
<div class="content">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Weekly Ad</a> </li>
<li><a href="#">Recepies</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Entertaining</a>
<ul>
<li><a href="#">Bakery Brochure</a></li>
<li><a href="#">Deli Platters</a></li>
<li><a href="#">Catering Planner</a></li>
</ul>
</li>
<li><a href="#">Pat's Best</a></li>
<li><a href="#">Organics</a></li>
<li><a href="#">Gift Cards</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Departments</a>
<ul>
<li><a href="#">Meats</a></li>
<li><a href="#">Deli</a></li>
<li><a href="#">Prepared Foods</a></li>
<li><a href="#">Seafood</a></li>
<li><a href="#">Produce</a></li>
<li><a href="#">Bakery</a></li>
</ul>
</li>
</ul>
<p> </p>
<ul id="frontpageslideshow" title="">
<li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="fall.jpg" /></a></li>
<li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="apples.jpg" /></a></li>
<li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="applepie.jpg" /></a></li>
<li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="pumpkinsoup.jpg" /></a></li>
<li><a href="images/roast.jpg" title="r"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="roast.jpg" /></a></li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141543: #frontpageslideshow
var frontpageslideshow = new Spry.Widget.ImageSlideShow("#frontpageslideshow", {
widgetID: "frontpageslideshow",
widgetClass: "BasicSlideShowFS",
injectionType: "replace",
autoPlay: true,
displayInterval: 4500,
transitionDuration: 2000,
componentOrder: ["name", "title", "view", "controls", "links"],
sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
TFSP: { pageIncrement: 4, wraparound: true }
// EndOAWidget_Instance_2141543
</script>
Since this is a one-column layout, the .content is not floated.
Logo Replacement
An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo.
Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.) <!-- end .content --></div>
<div class="footer">
<p>About us Other Services Employment Contacy us Terms of use Privacy Policy</p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>Your spry assets folder MUST be in the same folder as that of your webpage with the slideshow (html, php... whatever)
Check your folder configuration on the server by clicking on the "Remote Button" on the DW Assets Tab.
Example 1: This will not work:
WEBPAGE HERE: /server/public/myfolder/slideshow.html
SPRY ASSETS HERE: /server/public/SpryAssets/....your javascript files
Example 2: This will work:
WEB PAGE HERE: /server/public/myfolder/slideshow.html
SPRY ASSETS HERE: /server/public/myfolder/SpryAssets/....your javascript files
Hope this helps. -
Every time Firefox is first opened on restarting my computer, it opens very slowly, finally giving the unresponsive script warning Script: file:///C:/Program%20Files/Mozilla%20Firefox/components/nsBlocklistService.js:648. This '''''really''''' slows things down. I tried uninstalling Firefox and reinstalling; it didn't help. I'm running Windows XP Media Center edition Version 2002 with Service Pack 2.
It's possible that you are having a problem with some Firefox add-on that is hindering your Firefox's normal behavior. Have you tried disabling all add-ons (just to check), to see if Firefox goes back to normal?
Whenever you have a problem with Firefox, whatever it is, you should make sure it's not caused by one (or more than one) of your installed add-ons, be it an extension, a theme or a plugin. To do that easily and cleanly, run Firefox in [http://support.mozilla.com/en-US/kb/Safe+Mode safe mode] (don't forget to select ''Disable all add-ons'' when you start safe mode). If the problem disappears, you know it's from an add-on. Disable them all in normal mode, and enable them one at a time until you find the source of the problem. See [http://support.mozilla.com/en-US/kb/Troubleshooting+extensions+and+themes this article] for information about troubleshooting extensions and themes and [https://support.mozilla.com/en-US/kb/Troubleshooting+plugins this one] for plugins.
If you need support for one of your add-ons, you'll have to contact its author.
If the problem does not disappear when all add-ons are disabled, please tell me, so we can work from there. Please have no fear of following my instructions to the line, as all can be easily undone. -
Is there anyway to create a basic Image Viewer in CS5?
Hello,
Im looking for a really basic Image Viewer - exactly like the one you could create using DW CS3 but od corse it was discontinued. Is there any other way I can create something similar using CS5? or if not can anyone recomend a bsic one on - line without all the thumb Nails and fancy stuff.
Here is a perfect example of what I am looking for.
www.broadsoft.com.au/janielle/test5
ThanksLog-in to the Adobe Widget Exchange with your Widget Browser.
There are a some jQuery and Ajax powered image viewers & slideshows you can grab for your site.
jQuery Cycle Widget
Lightbox Gallery Widget
Spry Content Slides
Spry Image Slideshow
I don't recommend using a Flash viewer because it's not supported by all web devices.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Maybe you are looking for
-
Limit PO Err Combination of GR/IR control not allowed for external services
Hi, I am having a problem while replicating free text Limit PO's to R/3 in SRM 4.0 SP 13. The issue is while creating Free Text Limit SC with the "Confirmation and Invoice" option checked in, the PO's get created in SRM but fails while replicating t
-
Flash Crashes Windows 7 Enterprise Dell Convertable Tablet / Laptop
Greetings! I have recently recieved a new PC featuring Windows 7 enterprise. Flash refuses to work. I get what I like to call the cloudy screen of death, and IE/FireFox/Chrome simply close out. Does not matter what I do. I have tried installing sever
-
Flash CS4 Quiz Template: Help Needed
My organization uses the Flash CS4 quiz template that is included within the eLearning suite. Everything works great. The quiz loads on the LMS, it gives learners' their scores, etc. The issue we're having is after the score is recorded within the
-
Since the last update can't send mail every time I must enter my iCloud password.
I Have a iPhone 6 and a ipad 4. Since the last update only on my phone when I try to send mail a box pops up & I have to enter my iCloud password. It's very annoying. I don't have this issue on my ipad and as I said it started after the last update.
-
Networked HP K5400 printing everything backwards, server computer Windows Vista 32-bit Ultimate
Our networked HP K5400 printer has just started printing everything backwards, (word, notepad, Adobe reader, web). The server computer is a Windows Vista 32-bit Ultimate. Configuration has been working fine since we got the printer over a year ago. I