Response title
This is preview!
Matching images to dates the user chooses from the datepicker
in Using jQuery UI
•
11 years ago
I am trying to match a set of images to the dates chosen by user. The images have the same naming convention as the date format. For example, if the user chooses the date "2012-03-24", the image "2012-03-24.jpg" should appear. The images are sitting in a subfolder "images".Most likely it's this piece of code that is incorrect, but I can't figure it out. I've replaced .....attr("src"... with .attr("images/" for my src of images.
$("#img").attr("images/", dateText + ".jpg");
$("#img").attr("images/", dateText + ".jpg");
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>Preview</title>
- <link type="text/css" href="css/cupertino/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
- <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
- <style type="text/css">
- body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
- .demoHeaders { margin-top: 2em; }
- #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
- #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
- ul#icons {margin: 0; padding: 0;}
- ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
- ul#icons span.ui-icon {float: left; margin: 0 4px;}
- #img {position: absolute; top: 50px; left: 300px; border: black 1px solid; }
- .overlay {background: url(images/overlay.png) no-repeat;}
- </style>
- </head>
- <body>
- <!-- Datepicker -->
- <div id="datepicker">
- <h2 class="demoHeaders">Choose A Date</h2>
- </div>
- <img id="img" width ="300px" height="393px" alt="my image displays here responding to date entered by user" title="an image here">
- <script type="text/javascript">
- $(function(){
- // Datepicker
- $('#datepicker').datepicker({
- inline: true,
- dateFormat: 'yy-mm-dd',
- constrainInput: true,
- changeMonth: true,
- changeYear: true,
- //gotoCurrent: true,
- maxDate: '0',
- yearRange: '-15y',
- onSelect: function(dateText, inst) {
- $("#img").attr("images/", dateText + ".jpg");
- }
- });
- });
- //add class to have overlay of sample over front page
- $("#img").addClass("overlay");
- //hover states on the static widgets
- $('#dialog_link, ul#icons li').hover(
- function() { $(this).addClass('ui-state-hover'); },
- function() { $(this).removeClass('ui-state-hover'); }
- );
- </script>
- </body>
- </html>
1