CODEWITHSUNDEEP
javascriptjqueryhtmlcssfile-upload
Headjordan
Headjordan

Reputation: 19

How can I change the style of thumbnails?

I am completely unexperienced with Javascript and jQuery. I want to have a fileupload with jQuery using the Fileupload plugin. It works almost fine but I also want to have a preview of every uploaded picture, so I decided to create thumbnails of uploaded pictures next to the progressbar of the file. To do that I want to change the style by using css. But how can I link the thumbnail to my css file? That is the code which creates the thumbnail and there I need a relation to my css file.

add: function (e, data) {
            $('body).append('<img src="' + URL.createObjectURL(data.files[0]) + '"img width="220px" height="120px"/> <link rel="stylesheet" href="/assets/css/style.css"/>');

Unfortunately the tag does not work.

Upvotes: 0

Views: 178

Answers (2)

IndieRok
IndieRok

Reputation: 1788

1) You cannot append a CSS file after page load. So remove the tag from the append function.

2) Add your CSS file in the head tag beforehand.

HTML:

<head>
    <!-- head content -->
    <link href="/assets/css/style.css" type="text/css" rel="stylesheet" />
</head>

3) Create a new classname in your CSS file containing the styles you want your thumbnails to have

CSS:

.myThumbnailStyle{
    width:25%;
    display:inline-block;
    etc...
}

4) Add that classname to your thumbnail img tag

$('body).append('<img class='myThumbnailStyle' src="' + URL.createObjectURL(data.files[0]) + '" width="220px" height="120px"/>');

Upvotes: 2

Vitor Capretz
Vitor Capretz

Reputation: 163

If you create the image with correct classes that already exists in your .css file it should automatically apply the correspondent styles.

Also, don't forget to correctly close the body selector

add: function (e, data) {
            $('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '" width="220px" height="120px"/>');

Hope it helps you.

Upvotes: 0

Related Questions