[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 385
  • Last Modified:

Moving the position of an element

Hello,

I am trying to reposition the right arrow so that it is inline with the pictures and the left arrow in the gallery.  Any idea what needs to change?

http://www.webdesignrandd.com/examples/example1_lite.html
0
NewWebDesigner
Asked:
NewWebDesigner
  • 3
  • 3
1 Solution
 
Chris StanyonCommented:
Your page looks a little weird, but if I were you, I would wrap the left and right arrows inside the div.tn3-thumbs and then position them both absolutely.

Currently your left arrow is positioned absolutely (to the page) and your right arrow is positioned relatively (to the div.tn3-gallery)
0
 
NewWebDesignerAuthor Commented:
Thanks for the comment.  The classes appear to be generated by javascript in the jquery.tn3lite.min.js file.  This particular javascript is over my head.  What should I write to that file to wrap the left and right arrows in the div you suggested?
0
 
Tom BeckCommented:
Is there some customization of the tn3 Gallery that you are trying to accomplish?

The thumbnail strip in the gallery at the link you provided has become completely separated from the slideshow itself. If you reduce the browser window height to less than the height of the slideshow, the thumbnail strip actually displays on top of the slideshow. The placement of the arrows is the least of the problems.

Lets try this approach. When you apply the tn3.css file unaltered from tn3gallery.com to your markup the gallery displays like this (image dimensions reduced for this post).
default tn3 GalleryWhat part of the default tn3 gallery do you want to change? Maybe we can help you with that.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
NewWebDesignerAuthor Commented:
I would like to get rid of the big picture and just have the scrollable thumbnails.
0
 
Tom BeckCommented:
Your response is a little cryptic and I could interpret it in a couple of ways. I'll put on my Sherlock Holmes hat on and try to decipher the clues. It's not likely that you mean you want only thumbnails and no slideshow although that's the way your response could be interpreted. By "the big picture" I'll assume you mean the maximize button and full screen slideshow that results when you click it. I came to that conclusion because on the link you posted, the maximize button is gone.

To achieve the result pictured below, make the following changes to an unaltered copy of tn3.css from tn3gallery.com.

.tns-thumbs, change width to 512px
.tn3-next-page, change right to 3px
.tn3-fullscreen, remove all css and add display:none
.tn3-sep2, change right to 0
.tn3-sep3, remove all css and add display:none
tn3 Gallery modified (image dimensions reduced for this post)
0
 
NewWebDesignerAuthor Commented:
Tommy,

I actually do want to get rid of the big picture.  I have other plans for the gallery, and only need the thumbnails.  Sorry for being unclear.
0
 
Tom BeckCommented:
These changes would make the gallery disappear and move the thumbnails strip to the top.

.tn3-gallery, change the height to 0 (moves the thumbnails to the top)
.tn3-image, remove all css and add display:none
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now