backbone

Adding an image in a Joomla module adds an awful tag and border

i designed a simple website using joomla and i'm currently using beez3 template. i would like to add a simple image that can be clicked (as a hyper textual link) inside a module and place such module in a given position inside my template.

for such purpose, i created a new custom html module and placed inside it the following code:

<p><a href="http://ift.tt/1F7udTx">
<img src="images/hotel.jpg" alt="" width="250" height="180" /></a></p>

the image appears correctly where i wish, but it's surrounded by a kind of tab, whose title is the same i chose for module, that can be clicked, even if nothing happens when i do it. Here's how image appears, surrounded by tab (PARTNERS is the title i chose for module) tab surrounding image

do you know how to remove such tab and its borders surrounding image?

thanks for help.

How can I preview image before uploading with the correct orientation with JavaScript?

I have a upload button and I want users being able to preview the image before clicking 'save'. I have

<input type="file" accept="image/*" id="avatarInput" onchange="PreviewImage();"/>

as my HTML and for my JS:

      function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("avatarInput").files[0]);                

            oFReader.onload = function (oFREvent) {
                $('.image').attr('src', oFREvent.target.result);
            };
        };

But now, when I try to upload portrait image on my mobile, the preview image is rotated 90 degree. How can I cope with this? I've seen this and this but I don't know the codes can be incorporated in my case. Thanks.

image does not load (HTML)

I have a very simple question : my image does not load with that simple code.. do you have any explanation ?

<!DOCTYPE html>
<html>
   <body>
     <h2>my image</h2>
         <img src="C:\Users\Public\Pictures\Sample Pictures\desert.jpg" alt="image"/>
   </body>
</html>

Note : i am working locally on my computer using WampServer

I am 100% sure of the path (it displays the image if I copy/paste it directly in the url bar of firefox). I also tried to put the image directly in the same folder as the html file... I tried with firefox/chrome/IE with no success.

Something strange though : it works if I use online image...

Image/IO Loop over image (C)

I am attempting to convert a PPM image to PGM and loop through the image at each pixel do double avg etc...

#include <stdio.h>
#include "image-io.h"
int main(int agrc, char **argv)
{
    int i, j;
    if (agrc != 3) {
        fprintf(stderr, "Usage: %s infile outline\n", argv[0]);
        fprintf(stderr, "Reads PGM or PPM from infile,"
                "writes identical image to outline \n");
        return EXIT_FAILURE;
    }
    pm_init(argv[0], 0);
    struct image *img = read_image(argv[1]);
    fprintf(stderr, "input image is %dx%d, depth=%d, maxval=%d\n",
            img->pam.height, img->pam.width,
            img->pam.depth, (int) img->pam.maxval);
    img->pam.format = RPGM_FORMAT;
    img->pam.depth  = 1;
    for ( i  = 0 ; i < img->pam.height; i++) {
        for ( j = 0 ; j < img->pam.width; j++) {
            double avg = (img->r[i][j] +img->g[i][j] + img->b[i][j]) /3.0;
            img->g[i][j] = (int) (0.5 + avg);
        }
    }




    write_image(argv[2], img);
    free_image(img);
    return EXIT_SUCCESS;
}

I am having issue looping over the image

Owl Carousel - caption div (img title & alt tags)

I'm looking for a way to display the img title & alt tags in a div (.image-caption).

This is my code so far:

    owl.on('changed.owl.carousel', function(event) {

        var comment = $(this).find('img').attr('alt');
        var title = $(this).find('img').attr('title');
        if(comment) $('#desktop .image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>');

    })

Any ideas? Thanks!

display image in different resolution

I have created an sample code to see an image in different resolution such as tablet, mobile and desktop, the code is working but actually I want to see all these resolution within the desktop itself which is not working . My code is as given below

Can anyone please tell me some solution for this.

JSFiddle

Css

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box1 {
      width: 480px;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box2 {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box3 {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box4 {
      width: 25%;
      padding-bottom: 25%;
   }
}

Enhanced image plugin not working correctly when custom styles have been applied

For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?

lundi 20 avril 2015