How can I change the style of thumbnails?


Tags: javascript,jquery,html,css,file-upload

Problem :

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.



Solution :

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.


    CSS Howto..

    How to make the posts of a content type horizontal scrollabel?

    How to move this button?

    How to style a XUL textbox with CSS :focus

    How to apply css, after Jquery adds a class?

    jqueryui menu's submenu — how to keep in front

    How to divide the content column in to two using css

    How to add border to galleria big image?

    How to create a chrome extension using multiple css and js files?

    When styling XML with CSS, how to refer to tag names that contain periods or colons?

    How to bring in the right margin of a paragraph with border

    How to center modal window in css+html?

    How to modify css in OpenERP 7?

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How to place a scroll down button in the middle of split screen window?

    jQuery hover/hide/show - not all the text will disappear correctly when mousing over multiple images

    How to remove a html table particular column to make other datas visible(responsive) using media queries?

    How to vertically align items in horizontally ul list with images?

    How to do taxonomy based css styling using drupal template.php?

    How to adjust button css styles

    How do you add 'box-sizing: border-box' to Normalize.css file?

    How to select 1st Column of div Table?

    How to Surround Links with Bounding Box Using CSS

    How can I get the text style from window.selection()?

    How to specify the position of sub-menu div and prevent the menu div changed

    How can I use jQuery to add a fade in hover effect to my nav items?

    How to select col id using jquery to hide via css

    How to create a css class for category tags?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How to fill margin space with divs and give it styles?

    How to centre a javascript element using inline css? [closed]