Solved

Need help with jQuery/CSS  thumbnail gallery

Posted on 2013-05-29
2
336 Views
Last Modified: 2013-05-30
Hi,
I love the look of this gallery http://www.twospy.com/galleriffic/example-3.html but would like to have the thumbnails under the main pic

If I change div.content as below it works fine but I cant seem to work out how to get the thumbnails across whole page instead of 3 columns?

Any ideas?


div.content {
      display: none;
      float: right;
      width: 550px;
}

to

div.content {
      display: none;
        margin:0 auto;
      width: 550px;
}
0
Comment
Question by:sabecs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 4

Expert Comment

by:Ahmed Hussein
ID: 39204288
HYG,

Add this to your CSS file, or inline style.

#thumbs{
 width: 100%;
float: left;
opacity: 1;
}
div.content {
float: right;
width: 100%;
}

Open in new window


~AG
0
 
LVL 4

Accepted Solution

by:
Ahmed Hussein earned 500 total points
ID: 39204330
And to center the slideshow picture do this:

change left value for div.slideshow span.image-wrapper from left:0; to left:20%;

div.slideshow span.image-wrapper{
   left:20%;
}

Open in new window


and add this:

div.navigation {
width: 100%;
}

Open in new window


and should work like a charm.

~AG
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question