Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #186698

    I am trying to embed slideshows — the most recent one I created on Flickr — and they won’t expand to their proper width. Here is the code from the most recent one:

    <iframe src=”http://www.flickr.com/slideShow/index.gne?user_id=7614344@N08″ height=”500″ width=”620″ frameborder=”0″ scrolling=”no” align=”center”></iframe>

    Notice the width is set to “620” and the display on the “Home” page shows up at about “260”.

    I’ve been using the “Viper’s Video Quicktags” plugin for videos and they are showing up correctly.

    Any suggests how I can fix this issue? The website I am working on is located here:

    http://msv-nhne.org/

    The squished slide show is located on the “Home” page, which is the page that loads when you click on the URL above.

    Thanks for your help. This is a beautiful, well designed template!

    David

    #187075

    Hi sunfellow!

    You can add this on your custom.css or Quick CSS:

    iframe {
    width: 100% !important;
    height: 500px !important;
    }

    Better yet, change the iframe code to something like this:

    <iframe class="flickr-iframe" src=”http://www.flickr.com/slideShow/index.gne?user_id=7614344@N08″ height=”500″ width=”620″ frameborder=”0″ scrolling=”no” align=”center”></iframe>

    Then use this:

    iframe.flickr-iframe {
    width: 100% !important;
    height: 500px !important;
    }

    Regards,
    Ismael

    #187651

    Ismael, thanks for the suggestions, but assuming I implemented them correctly, neither one worked. I took some screen captures of what happened, but don’t see a way to post them here. I added the first code you gave me to the Quick CSS box, saved it, and then reloaded the page with the slide show. The slide show appeared the same small size it was before, but with the template’s counter covering most of the image, and WordPress header information at the top of the slide show.

    Then I removed the first code to the Quick CSS box and added the second code. I saved it. Then replaced the iframe code you provided with the one that flickr provided. Then saved and reloaded that page. This time the slide show presented itself at the width I wanted, but, again, the template counter covered part of the slide show and some WordPress header information appeared at the top.

    Any other suggestions? Also, in case it makes a difference, I also have another CSS code in the Quick CSS box, which is turning off the Lightbox magnifying glass. Here’s what the Quick CSS box contained before I added your code:

    ……

    .image_overlay_effect.lightbox_image {
    display: none !important;
    }

    ……

    Here’s what the Quick CSS box contained I added your code. Did I add your code correctly?

    …….

    .image_overlay_effect.lightbox_image {
    display: none !important;
    }

    iframe.flickr-iframe {
    width: 100% !important;
    height: 500px !important;
    }

    ………..

    Thanks for helping me get this working!

    #188192

    Hey!

    Did you modify the iframe code? You should add the “flickr-iframe” class on it.

    <iframe class="flickr-iframe" src=”http://www.flickr.com/slideShow/index.gne?user_id=7614344@N08″ height=”500″ width=”620″ frameborder=”0″ scrolling=”no” align=”center”></iframe>

    Then add this code:

    iframe.flickr-iframe {
    width: 100% !important;
    height: 500px !important;
    }

    Or if you want to apply it on all iframe elements. You can use this:

    iframe {
    width: 100% !important;
    height: 500px !important;
    }

    I tested the following on my end and it works properly. Please remove browser cache then reload the page.

    Best regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.