- Posts: 11
- Thank you received: 0
Gallery page
-
canda13
Inactive member - Topic Author
- New Member
Less
More
13 years 10 months ago #5285
by canda13
Gallery page was created by canda13
Hi,I am trying to get 4 thumbnails across the page in my gallery and i am unable to do this in the photogallery plug in. It will not go beyond 2 across:
The url is:
www.greatorexfinearts.com/index.php?opti...cle&id=28&Itemid=120
Also I need to remove the brown coloured border around the thumbnail images.
Any advice on how to do the above would be appreciated.
Many thanks,
Chris
The url is:
www.greatorexfinearts.com/index.php?opti...cle&id=28&Itemid=120
Also I need to remove the brown coloured border around the thumbnail images.
Any advice on how to do the above would be appreciated.
Many thanks,
Chris
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
13 years 10 months ago #5312
by ivan.milic
Replied by ivan.milic on topic Re: Gallery page
To remove brown border:
In template_css.css find:
#gallery img {
margin: 0px 20px 20px 0px;
padding: 5px;
border: 1px solid #FFD441;
display: block;
float: left;
}
Then you will have gray border. There is one more time:
#gallery img {
margin: 0px 0px 0px 0px;
padding: 3px;
border: 1px solid #CCC;
display: block;
float: left;
}
To remove it go to Template Manager - > Edit HTML or maybe in template_css.php
To display 4 in a row:
In template_css.css you have:
.gallery_container {
width: 400px;
float: left;
}
change 400px to 800px.
Then go to Template Manager - > Edit Html
And add this just before </head>:
<style type="text/css">
#gallery .clear {
clear: none;
}
</style>
In template_css.css find:
#gallery img {
margin: 0px 20px 20px 0px;
padding: 5px;
border: 1px solid #FFD441;
display: block;
float: left;
}
Then you will have gray border. There is one more time:
#gallery img {
margin: 0px 0px 0px 0px;
padding: 3px;
border: 1px solid #CCC;
display: block;
float: left;
}
To remove it go to Template Manager - > Edit HTML or maybe in template_css.php
To display 4 in a row:
In template_css.css you have:
.gallery_container {
width: 400px;
float: left;
}
change 400px to 800px.
Then go to Template Manager - > Edit Html
And add this just before </head>:
<style type="text/css">
#gallery .clear {
clear: none;
}
</style>
Please Log in to join the conversation.
-
canda13
Inactive member - Topic Author
- New Member
Less
More
- Posts: 11
- Thank you received: 0
13 years 10 months ago #5380
by canda13
Replied by canda13 on topic Re: Gallery page
Many thanks for your help,
I still have a problem in that the 2nd row of images does not start to the left of the page see url:
www.greatorexfinearts.com/index.php?opti...cle&id=28&Itemid=120
the top row is fine and exactly what I want.
The 2nd row needs to start at the left hand side and not where it is now.
Many thanks in advance.
Chris
I still have a problem in that the 2nd row of images does not start to the left of the page see url:
www.greatorexfinearts.com/index.php?opti...cle&id=28&Itemid=120
the top row is fine and exactly what I want.
The 2nd row needs to start at the left hand side and not where it is now.
Many thanks in advance.
Chris
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
13 years 10 months ago #5395
by ivan.milic
Replied by ivan.milic on topic Re: Gallery page
Hi,
We must try second solution. Got to Extensions->Template Manager, then click Edit HTML
Put next script block inside <head> tag:
<script type="text/javascript">
jQuery(documen).ready(function(){
var COLUMNS = 5;
var gal = jQuery('#gallery');
if(gal[0]){
gal.find('.clear').remove();
var TABLE = jQuery("<table cellpadding='0' cellspacing='0' ></table>");
var row = jQuery('<row></row>');
var n = 0;
while(gal.children('a').length != 0)
{
n++;
var chld = jQuery(gal.children('a')[0]);
row.append(chld);
if(n == COLUMNS)
{
n = 0;
TABLE.append(row);
row = jQuery('<row></row>');
}
}
if(row.children().length > 0){
TABLE.append(row);
}
gal.html('');
gal.append(TABLE);
}
});
</script>
Maybe it will not work first time but leave it there so I could debug it and send to you final version.
We must try second solution. Got to Extensions->Template Manager, then click Edit HTML
Put next script block inside <head> tag:
<script type="text/javascript">
jQuery(documen).ready(function(){
var COLUMNS = 5;
var gal = jQuery('#gallery');
if(gal[0]){
gal.find('.clear').remove();
var TABLE = jQuery("<table cellpadding='0' cellspacing='0' ></table>");
var row = jQuery('<row></row>');
var n = 0;
while(gal.children('a').length != 0)
{
n++;
var chld = jQuery(gal.children('a')[0]);
row.append(chld);
if(n == COLUMNS)
{
n = 0;
TABLE.append(row);
row = jQuery('<row></row>');
}
}
if(row.children().length > 0){
TABLE.append(row);
}
gal.html('');
gal.append(TABLE);
}
});
</script>
Maybe it will not work first time but leave it there so I could debug it and send to you final version.
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
13 years 10 months ago #5396
by ivan.milic
Replied by ivan.milic on topic Re: Gallery page
You can change number of columns var COLUMNS = 5; put some other value if you want.
Please Log in to join the conversation.
-
canda13
Inactive member - Topic Author
- New Member
Less
More
- Posts: 11
- Thank you received: 0
13 years 10 months ago #5423
by canda13
Replied by canda13 on topic Re: Gallery page
Ok, I have inserted the script but there is no change to the layout.
The script remains in the html for debugging
Many thanks again for all your excellent support thus far
Regards,
Chris
The script remains in the html for debugging
Many thanks again for all your excellent support thus far
Regards,
Chris
Please Log in to join the conversation.
Time to create page: 0.156 seconds