Responsive Images

I have a 900x300 images(s) on a JQuery Cycle 2 Image Slider. They look pretty good in desk view. When I switch to mobile view, they look bad, (small image-flat with little height.) I assume part of reason is becuase of the size of image (elongated), but thinking I have to somehow change image for mobile view, and/or use media queries.
Is it possible to make a long 900x300 banner type image look good (not so flat and long) in mobile view? Seems there is nothing Photoshop can do (crop, resize) to make this look good in mobile view?
I am still learning CSS, HTML, and now this 'mobile first' design method--which kinda confuses me. I find myself trying to develop in desk view first, seems more logical, easier? Seems like whenever I say for example, change the image source in mobile to another image to replace a larger image from desk view, the new mobile image I insert then changes the desktop image.
Does it make any difference when building a responsive page, whether I insert the image for a particular platform, in a particular order?
My best experince with responsive images is: making a div on desktop to my desired %width. Inseting a 480x300 image ( image larger than the div). The picture fills the div with a given % great on desktop, and expands appropriately to full image 480x300 on mobile?--Seems to work good, with no need to swap images?
Are there any general rules / advice/ simplifications or best methods for dealing with responsive design and images?
I still have not grasped how / when / where to swap images in responsive design.
How do most designers deal with responsive images and multiple platforms?
Thanks for any help

Change this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
to this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
Github is not a CDN. It's a script download repository. The scripts on their servers do not contain proper headers and will fail to work with some browsers, firewalls & proxy servers. So don't link directly to Github. Also, you don't need TWO Cycle2 plugins. One is all that's required.
Nancy O.

Similar Messages

Responsive images CSS help

I usually make my images responsive by adding
max-width:100%; height:auto;
to the css class that is being called for the image.
However, I now have an image that is being used with a hover and click effect that I want to make responsive and the above doesn't want to work.
The image I have has three parts to it. The top section is the normal state, the centre part is the hover state and the bottom section is the active state.
The total image is 280px wide and 3x125px high.
In the css I use:
.p01-button {
    width: 280px;
    height: 125px;
    background: url('home01.png') top left no-repeat;
for the normal state and then:
.p01-button:hover {
    background-position: center left;
for the hover state and
.p01-button:active {
    background-position: bottom left;
    padding-top: 0px;
for the active state.
This all works fine with a full screen browser but the images don't scale on smaller screens.
Can I make these responsive in a similar way to the first method?
Many thanks in advance.

I would place a responsive <img> and use javascript to alter its source (using 3 separate images), rather than attempt to make an empty <div> responsive yet constrict it to the dimensions/perspective of its background image.
Here's some code that would do the trick...
<img src="start-image.jpg" onmouseover="this.src='hover-image.jpg';" onmouseout="this.src='start-image.jpg';" onmousedown="this.src='down-image';" />

How we can design responsive image in HTML?

Dear sir/madam
i m sangram from pune ... i need some halp ... i have a one templet not responsive ... please help me to make templet responsive
contact me on 8796535503..
thanks
sangram

Start reading books and articles on Responsive Web Design. Build Mobile first. Mobile users interact with their devices very differently from desktop users. Finger-friendly menus and forms are essential.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Jump start your new projects with a Responsive Framework. There are many free ones you can download online.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Good luck!
❄ ☃ ❄Nancy O.

Creating a Responsive Image Slider in Dreamweaver

Hello,
In Dreamweaver, when we select fluid grid layout, how do we create a responsive slider, if we make use of properties in CSS designer panel. I can design static website, but having difficulty when it comes to Responsive one.
Any advise would be appreciated.
Thanks

You have answered my reply as being correct and rightly so.
But Preran's example using Bootstrap is probably the better way to go and, as Nancy suggests, Bootstrap is much more than a RWD framework, it is an all encompassing site building framework that can be customised as required.
I can go on for a long time regarding the virtues of Bootstrap, suffice to say that if an Adobe staff member sees fit to start dabbling around with Bootstrap rather than using Adobe's own FGL, lights must start flashing in the development world.
My advice (especially to Os): Start using the Bootstrap source files (Less and JS) and use the Prepros app until DW comes with its own compiler. For a leg up see here Bootstrap 3 Less Workflow Tutorial | Experience Design at Hello Erik
Enough said for now.

Responsive images look like triple exposures

I'm using Dreamweaver 6, fluid grid layout.
Whether I insert a single image or use picturefill/matchemedia I have the same problem. Sometimes one or another of my graphics show up looking like a triple exposure. It can happen in ff, ie or chrome, sometimes on startup, sometimes when I've been using them a while. Sometimes I can clear cache and history, reload, and get straightened out, sometimes not.
Is there a secret code beyond the media query so the images arrive right every time?

Aww. Back in the old days when cameras had film and manual frame forwarding, if you forgot to forward the frame your exposure would be on top of the one just taken.
This one I just caught in firefox is a mild example. The error is browser agnostic and it presents differently every time it happens.
the image here is a jpg inserted straight from the image file into the fluid layout grid.

How can i make a full screen image on a one page website

I am making a one page website with 5 items. I want with each item a fullscreen (responsive) image. Can i do that in Adobe muse?

When you say "responsive" do you mean; Desktop/Phone/Tablet.

Responsive gallery and DW template

I've been trying to find a way to add a "responsive image gallery" into my CS6 DW template.
Actually, I need to create around 100 image galleries - each gallery will have around 70 images.
I thought I had the answer with "JuiceBox" running the "script" thru CS6 PS and creating the gallery and posting that gallery with no modifications to the page - and it looked fine on my mobile phone (Kyocera Hydro VIBE running Andriod v4.3) - checked the page in the Chrome browser and whatever the un-named browser is that comes on the phone, looked great.
Page is at: http://www.wakeupgraphics.com/ici_tt/current/500/index.html
But the page I used/added the gallery onto with the DW template doesn't work right on my mobile phone.
Page is at: http://www.wakeupgraphics.com/ici_tt/current/500/index2.html
What's really odd is the DW page with the "JuiceBox" gallery in it looks fine on my desktop, in three different browsers. Reduce the browser window and it responds nicely.
I tried the "Apply Template" function in DW then tried using the "JuiceBox" steps for adding it to a DW page by putting in the "script" to the page.
Posted the resulting pages - Results were pretty much the same - doesn't work right on my mobile phone.
The gallery can not use "Flash" because of the issues with Apple mobile products.
I would rather not build them manually because of all the time it would take to do each.
Maybe this isn't the proper place to ask this question so maybe someone can point me to the right Forum.
Thanks,
Cliff

OK - on my mobile phone in the un-named browser, when the page first loads I have a large image that is "skewed" (either orientation) with the "Title" verbiage of the gallery and under it the verbiage "View Gallery" - when you hit/touch the "View Gallery" all images disappear including the "Nav-Menu" - an image from the gallery will show briefly when you touch the screen and then it disappears. You can "scroll" left and another image shows but again just briefly then disappears.
On my mobile phone in the Chrome browser it works somewhat but you really have to "fiddle" with it. In "Portrait" orientation you can see an image and "scroll" thru by "swipping" across screen but the "Nav_Menu" that shows doesn't respond when touched. However in the "Landscape" orientation the image covers the "Nav-Menu" when you hit/touch the "View Gallery".
It's very strange cause it all works great in any browser and any viewport (narrow or wide) on my desktop Mac

Responsive gallery help (javascript issue?)

I'm trying to add this responsive gallery to my site (http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/) - I'm still working on customizing the style, but my main issue is that it's not responsive - I copied everything from the downloaded files, even tried with a clean HTML page when it failed to work within my site, but the gallery does not adjust when I resize the browser window.
http://atenndesign.com/photos/cuba.html
I'm not experienced in javascript but I copied those files and link paths as is... what am I missing?

The gallery is responsive (you can test this by adding a small width to your <div class="content"> which will resize the gallery). However, your website is not. For the gallery to work, you need to make the rest of the site responsive by using % widths and preferrably no tables. There are a few posts about responsive sites in this forum or you can have a look here: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

Can't get image slider to work

Every image slider tutorial I do, I can't seem to get to work! I'm obviously doing something wrong!! Could someone please point out what it is please? I've been going onto CodePen > typing in responsive image slider > copying the html > creating a separate CSS and JS and linking to them. But when I run the page, nothing happens. What vital ingredient am I missing?
Untitled Document
Thanks.

I agree with you pal - there's no point in trying to be clever if no-one can find the code.
If you want the slider you're talking about then copy the code below and paste into a dreamweaver document and browse - have fun and then go tell code pen they are a pile of shite.
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/MarcoGuglielmelli/pen/ogZWpv" />
<style class="cp-pen-styles">@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
body {
background-color: #979797;
color: #fff;
margin: 0em;
padding: 0em;}
.page {
max-width: 640px;
margin: 0px auto 30px auto;}
.panel {
background-color: #fff;
color: #666;
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
overflow: auto;}
button {
border: none;}
/********** LOGO **********/
h1 {
text-align: center;
width: 200px;
height: 20px;
margin: 40px auto 40px auto;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}
/********** TYPOGRAPHY **********/
body, button {
    font-family: 'Jacques Francois', serif;}
h2, h3 {
font-weight: normal;
margin: 0em;}
h2 {
color: #666;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 230%;
line-height: 1em;
padding: 20px 0px 0px 20px;}
h3 {
font-size: 90%;
letter-spacing: 0.2em;}
p {
font-family: 'Quattrocento Sans', sans-serif;
line-height: 1.4em;}
a {
    text-decoration: none;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
/***************** No JS ***************/
#billboard {text-align: center;}
.js-warning {display: none;}
.no-js .js-warning {
display: block;
border: 3px solid #fff;
text-align: center;
background-color: #fff;
color: #db5391;
padding: 10px;}
/********** SLIDER **********/
.slider {
max-width: 940px;
margin: 0px auto 30px auto;}
.slide-viewer {
    position: relative; /* needed for IE7 */
    overflow: hidden;
    height: 430px;}
.slide-group {
    width: 100%;
    height: 100%;
    position: relative;}
.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;}
.slide:first-child {
    display: block;}
/********** BUTTONS **********/
.slide-buttons {
text-align: center;}
.slide-btn {
border: none;
background: none;
color: #000;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}</style></head><body>
<header><h1>Responsive Slider</h1></header>
<section>
      <div class="slider">
        <div class="slide-viewer">
          <div class="slide-group">
            <div class="slide slide-1">
              <img src="http://javascriptbook.com/code/c11/img/slide-1.jpg" alt="No two are the same" />
            </div>
            <div class="slide slide-2">
              <img src="http://javascriptbook.com/code/c11/img/slide-2.jpg" alt="Monsieur Mints" />
            </div>
            <div class="slide slide-3">
              <img src="http://javascriptbook.com/code/c11/img/slide-3.jpg" alt="The Flower Series" />
            </div>
            <div class="slide slide-4">
              <img src="http://javascriptbook.com/code/c11/img/slide-4.jpg" alt="Salt o' The Sea" />
            </div>
          </div>
        </div>
        <div class="slide-buttons"></div>
      </div>
    </section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script>
$('.slider').each(function () {
    var $this = $(this);
    var $group = $this.find('.slide-group');
    var $slides = $this.find('.slide');
    var buttonArray = [];
    var currentIndex = 0;
    var timeout;
    function move(newIndex) {
        var animateLeft, slideLeft;
        advance();
        if ($group.is(':animated') || currentIndex === newIndex) {
            return;
        buttonArray[currentIndex].removeClass('active');
        buttonArray[newIndex].addClass('active');
        if (newIndex > currentIndex) {
            slideLeft = '100%';
            animateLeft = '-100%';
        } else {
            slideLeft = '-100%';
            animateLeft = '100%';
        $slides.eq(newIndex).css({
            left: slideLeft,
            display: 'block'
        $group.animate({ left: animateLeft }, function () {
            $slides.eq(currentIndex).css({ display: 'none' });
            $slides.eq(newIndex).css({ left: 0 });
            $group.css({ left: 0 });
            currentIndex = newIndex;
    function advance() {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            if (currentIndex < $slides.length - 1) {
                move(currentIndex + 1);
            } else {
                move(0);
        }, 4000);
    $.each($slides, function (index) {
        var $button = $('<button type="button" class="slide-btn">•</button>');
        if (index === currentIndex) {
            $button.addClass('active');
        $button.on('click', function () {
            move(index);
        }).appendTo('.slide-buttons');
        buttonArray.push($button);
    advance();
//@ sourceURL=pen.js
</script>
<script src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>

No Join Response from WLC 4402 to LWAPP AP

Hi,
i have a problem with the 1242 LWAPP Access Points. It's not possible for a few access points to connect to the WLC.
With some Access Points i get a join response.
WLC image is 5.2.157.0
AP's which i can't connect (no join response)
image version:      3.0.51.0
IOS version:         12.4(21a)JA2
AP's which i can connect (join response)
image version:      5.2.157.0
IOS version:         12.4(18a)JA
Can anybody help me? I can find a few topics in this community, but no one of these topics can help me in this case.
in the following attachment no-join response.txt you can find the recording of the hyper terminal.
Thanks in advance for answers.

Problem is solved.
I have upgraded the WCS und both WLC Controllers to Version 7.x.
And for the "older" AP's with the image 3.x a secondary dns entry cisco-capwap-controller....

Can someone help me and explain how to affect hotspot/image map with css rules or any other way?

i have problem with hotspot because its position cant be fixed to follow the proportion of the fixed background in different resoulutions.

You can't affect hotspots at all with css. Here are a couple different options you have available though...
You could try using multiple images that scale, linking each individual image, instead of hotspots.
You could also look into "responsive image maps" to get quite a few examples of jquery/javascript run image maps that can be scaled.
Depending on your image, (for example, if you are linking states on a map) you would be able to use SVG paths and link the paths with javascript.

Help with CD front pages images.

Hi there !
I just bought my new Black Video 60G. iPod. At the moment all is working allmost ok.
Does anybody had a similar trouble with not showing images that identify the front page of CD's?. I mean I import the images in .jpeg and at bigining they was show on ipod screen, but.. when i add more pics to ident my cd's they simply doesn't appear any more.
I select and de-select the icon where choose show it or not but... nothing.
If i check trought i-Tunes my Ipod music files, the images are there !! but i can't see them... ( double clicking at central control).
How can i resolve this?
Thank's in advance Guys & Girls
Sony Vaio R35mx Windows XP

You can go with these options :
http://musewidgets.com/collections/all/products/responsive-image
http://musewidgets.com/collections/all/products/responsive-images
Thanks,
Sanjit

Apple Mail Won't Let Me See My Responses to Emails

If someone could help me with my problem that would be great!?
I recently have had Apple Mail problems where when I select the arrow(response) image to my emails to view the entire converstation it only shows me the person's response. I know that I should be able to see my replies as well as the other person's entire conversation. I can however view my sent messages without a problem.
What am I misisng?

I found a solution......
It turns out there are several related threads like this one discussing the problem.
First, I attempted to reindex mail using the instructions here:
http://support.apple.com/kb/PH4801?viewlocale=en_US&locale=en_US
after deleting the "envelope" files and restarting mail you get a message as you did when you first used mail after upgrading to OS 10.8. Click OK and allow the re-import of all your old mail.
I have 65,000 emails on my mac, so this took a while, about 35 minutes.
Bad news: It didn't make any difference. double clicking the "see reply" icon still did not work.
So... I looked around some more and found this:
https://discussions.apple.com/thread/2464211?start=15&tstart=0
Read to the end of that thread...
THERE IS A FIX!
It is a bizar bug it seems and it was answered above.
Go to mail - preferences
select the account and account information
go to outgoing mail server and edit list (It does not matter if it looks correct)
Edit the list and enter the details again. Make sure the newly entered one is the one selected.
And then it now works!
Phew this was driving me mad.
Surely the solution can't be that simple?
I gave it a try, and guess what... it appeared to work. Double clicking on the curly arrow now calls up the reply in a new window as it should.

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

Make a text Responsive

hi all,
As edge being a very powerful tool for responsive Images, Divs and other content, there is still a pretty hard time coping with text.
my solution was to compromise on the design that the text will work fine (such as go out of a frame....)
any way in one part i can't compromise on the design and I have to reduce the font face EM only to work with 9" and below devices , is there any code for that ?
such as media queries on CSS?
many thanks

hey Seif,
many thanks for your replay,
although i consider myself pretty knowledge with edge,
I just dont understand what you did with the files attach....
any explanation will be much appreciate

Responsive Images

Similar Messages

Maybe you are looking for