My favorites | Sign in
Project Home Downloads Issues
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 312: Change position of a.nyroModalNext/Prev buttons or create extra ones outside wrapper
2 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Owner:  ----
Closed:  Aug 2009


 
Reported by studio25...@gmail.com, Aug 17, 2009
A client of mine has the wish to have the Next and Prev buttons outside the
wrapper/image area.
I tried to do this myself, but without any luck. Seems that the position of
the a.nyroModalNext and a .nyroModalPrev are pretty fixed positioned.
I would like to change the position of the buttons below the image.
Or to create extra a.nyroModal... buttons 
Is this possible anyway?

Aug 17, 2009
#1 studio25...@gmail.com
for example i made a screenshot of the delivered design where they made a custom
"lightbox" example.
example.jpg
215 KB   View   Download
Aug 17, 2009
Project Member #2 nyro...@gmail.com
The problem to do that for now is that #nyroModalContent has overflow: hidden set
automatically when an image is shown.
I can't remember why I did that and I'll probably remove it in the next release if
nothing is wrong without it.

To solve your problem, you simply need to set a callback to manually change this css
attribute like that:
$.nyroModalSettings({
	endShowContent: function(modal, settings) {
		modal.content.css({overflow: 'visible'});
	}
});

Then, you simply need to change the css of a.nyroModalPrev and a.nyroModalNext to set
the position as you need.
Status: Fixed
Aug 17, 2009
#3 studio25...@gmail.com
i mentioned that the calling content has an overflow.
And you probably had a good reason to create it like it is right now.
For future releases, it'll be more comfortable when elements like buttons are more
flexible to change it's positions. On the other hand... how many people in the world,
which are using your plugin, is in the need to change those things.
Till this far i am probably the only one :)
So for me that would be something interesting.

I gave your solution a serious try, but i can't get it work.
When i add your callback in the modal.js and try to open an image on the page, the
image opens in a clean page, it won't open the image in the lightbox effect.

I have a slight feeling that i am doing something very wrong...

I have an url where you can view the templates i am working on.
Just click on random images on the page. They all got the nyromodal class.
Maybe you can see in the .js what i have to do to get your solution work.

http://tiny.cc/SIhLs


Aug 18, 2009
Project Member #4 nyro...@gmail.com
At the very bottom of your page, after including nyroModal, add:
<script type="text/javascript">
$(function() {
  $.nyroModalSettings({
	endShowContent: function(modal, settings) {
		modal.content.css({overflow: 'visible'});
	}
  });
});
</script>

And then, on your CSS, change the position of a.nyroModalPrev and a.nyroModalNext
Aug 18, 2009
#5 studio25...@gmail.com
Ooooh.... that is how to add a or make a callback?
wow... i can make a lot of things with html and stuff... i guess i will never
understand javascript and it's work arounds.
Thank you so much. I tried to place the first calback of you in the js file it self.
Guess that was a dumb action.
Aug 18, 2009
#6 studio25...@gmail.com
:) funny.
It works. Only i cannot set the bottom position to a minus. like bottom:-10px or
margin-bottom:-10px etc
I can live with it how i can position the button to the left or right and i think my
client accept how i have it right now (only different images to make)
But i thought i let you know about the bottom positioning.
You can still view the example from the tiny url above
Nov 8, 2009
Project Member #7 nyro...@gmail.com
the version 1.5.4 was just released and update the overflow property as described above.

Powered by Google Project Hosting