I have implemented an Awkward slider to display images for my article. I made some CSS modifications to change the design and it worked perfectly fine when used on an HTML page.
However, when I tried using it with an ASP.NET web form, it failed to work for some unknown reason. Despite spending several hours trying to figure out what went wrong, I couldn't pinpoint the issue.
To troubleshoot, I uploaded the HTML source of the .aspx page with adjusted paths for online scripts and dummy image sources as an example on jsFiddle Link.
Since I needed to incorporate it as an ASP.NET User Control, which was not functional, I created a simple test.aspx page with a user repeater control to read images, image captions, and more.
The HTML code appears to be correct, but the script is failing to work entirely.
I would greatly appreciate any assistance in this matter.
A screenshot showing that it works well in xyz.html page.
Here is the actual output from the simple .aspx page:
<!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><title>
</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link href="../styles/english_css.css" rel="stylesheet" type="text/css" /><link href="../styles/english-article-images.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery.aw-showcase.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showcase").awShowcase(
{
content_width: 500,
content_height: 333,
fit_to_parent: false,
auto: false,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: false,
transition: 'fade', /* hslide/vslide/fade */
transition_delay: 0,
transition_speed: 500,
show_caption: 'onload', /* onload/onhover/show */
thumbnails: false,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'vertical', /* vertical/horizontal */
thumbnails_slidex: 1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
custom_function: null /* Define a custom function that runs on content change */
});
});
</script>
</head>
<body>
<form method="post" action="test.aspx?PageID=5&Language=en-US&ParID=5&Issue=5&cid=1&aid=17" id="form1">
...