Chapter 8:Resizing Uploaded images.

hozdaman · January 17th, 2012, 12:44 PM

Hi,

I am having issues with my gallery. I have upload 3 or 4 images to my upload folder, but when I run the gallery.cshtml page i only get 1 image to display. Also, when I click on the thumbnail the Fancybox doesn't seem to work I get a new page with the larger image. Please help, Thanks

This is the message I get from firebug in Firefox:

If <script> tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct).

I see text/javascript in the appropriate places.
Code:

Code:

@{
    var folderName="";
    var path="";
    var files=new List<string>();
    if(Request.Cookies["folder"] != null){
        folderName =Request.Cookies["folder"].Value;
        path=Path.Combine(Server.MapPath("/Uploads/"), folderName);
        foreach(var file in Directory.GetFiles(path)){
            if(Path.GetFileName(file).Contains("_thumb_")){
                files.Add(Path.GetFileName(file));
            }
        }
    }
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Gallery</title>
        
        <link rel="stylesheet" href="@Href("~/Content/tinycarousel.css")" type="text/css" />
        <link rel="stylesheet" href="@Href("~/Content/jquery.fancybox-1.3.4.css")" type="text/css" />
        <script type="text/javascript" src="@Href("~/Scripts/jquery-1.7.1.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.tinycarousel.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.fancybox-1.3.4.pack.js")"></script>
        <script type="text/javascipt">
            $(document).ready(function(){
                $('#slider-code').tinycarousel();
                $('.thumb').fancybox();
            });
        </script>
    </head>
    <body>
       <h3>Gallery</h3>
        <div id="slider-code">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    @foreach(var file in files){
                        <li>
                            <a class="thumb" href="Uploads/@folderName/@file.Replace("_thumb", "")">
                            <img src="Uploads/@folderName/@file" alt=""/>
                            </a>
                        </li>
                    }
                </ul>
        </div>
        <a class="buttons next" href="#">right</a>
        </div>
    </body>
</html>

Imar · January 18th, 2012, 08:52 AM

Take a look at this:

Code:

 
<script type="text/javascipt">

You have javascipt instead of javascript with an r....

Imar

hozdaman · January 18th, 2012, 09:56 AM

Thanks Imar.

I have another issue I uploaded other pictures into the upload folder but when I run the gallery only 1 picture is displaying and not any others. I think its because I need to delete the cookie and then run the page. If that's so how can I programatically delete the cookie and have new one set so its not manually done?

Thanks.

Imar · January 18th, 2012, 10:02 AM

To delete a cookie, you can set the expiry date to a date in the past (using something like DateTime.Now.AddYears(-1) for example. Then the browser will clean it up for you.

Cheers,

Imar

ASPLee · October 8th, 2012, 12:57 PM

I'm having the same problem with the image gallery. I only see one image and the arrow buttons don't work.. in other words they don't slide to the other images in either direction (left or right).

I deleted the cookies already and started over.. can't find the fix... can you help?

thanks
p.s. tried IE9 and Firefox... no luck

Mike Brind · October 8th, 2012, 02:47 PM

Download the code samples for Chapter 8 and see if the final one runs ok. If it does (which it should) compare the code there to what you have for typos etc.