21309 Posts in 5738 Topics by 2603 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1159 Views |
-
Calculate images total width
27 March 2011 at 3:12pm
I'm spitting out a bunch of images for a gallery and I'll like to calculate the total width of those images.
I was doing in jQuery and got it to work for one gallery but haven't figured out how to do it when I have multiple galleries on the page as it was adding up all images on the page, not just the ones per gallery. So I thought maybe a function in my controller would be a better route. So, I'm looking for help with the function to do the calculation.
in my template I have:
<% control PortfolioWorks %>
<div class="scroll-pane">
<% control PortfolioImages %>
<img class="portImage" src="$Attachment.URL" width="$Attachment.width" height="$Attachment.height">
<% end_control %>
</div>
<% end_control %>or if you think jQuery is the best option, this is what I have so far:
I figured I could make the above class - class="scroll-pane$Pos" but not sure how to do address that in the script without writing it a bunch of times, one for each… scroll-pane1, scroll-pane2, etc.var totalWidth = 0;
$('.scroll-pane img').each(function() {
totalWidth += $(this).outerWidth();
$('.scroll-pane').css("width", totalWidth);
});thanks
-
Re: Calculate images total width
28 March 2011 at 12:21am
OK I haven't test this and it's kind of late but off the top of my head I'd say your JS needs to look like this:
$('.scroll-pane').each(function() {
var totalWidth = 0;
$('img', this).each(function() {
totalWidth += $(this).outerWidth();
});
$(this).css("width", totalWidth+"px");
});Basically it says for each .scroll-pane, it loop over it's child images images (in jQuery "$('img', this)" will get all images that are children of the current object).
I'm not sure what your controller looks like but I'm thinking if you want to do it server-side you'd need to have something like a TotalWidth method or attribute on whatever PortfolioWorks is returning.
So if PortfolioWorks is a pageor dataobject that has_many images, give it a method something like this:function TotalWidth() {
$width = 0;
foreach ($this->PortfolioImages() as $portfolioImage) {
$width += $portfolioImage->Attachment()->Width;
}
return $width+'px';
}and call it in your template like
<% control PortfolioWorks %>
<div class="scroll-pane" style='width:$TotalWidth'>
<% control PortfolioImages %>
<img class="portImage" src="$Attachment.URL" width="$Attachment.width" height="$Attachment.height">
<% end_control %>
</div>
<% end_control %> -
Re: Calculate images total width
28 March 2011 at 8:18pm
Thanks Nathan for the help.
I was able to get the jQuery to work after changing the css to $('.portfolio', this).css("width", totalWidth); Thanks for the explanation, it helped me figure it out. Unfortunately, the jQuery is either not running after all the images are loaded or something else is causing me pain because it's not working every single time.
I tried to play with the php method version but was unable to get it to work. If you have time, here's the bigger picture (have a dom nested in a dom)…
PortfolioWork.php
class PortfolioWork extends DataObject {
…
public static $has_one = array (
'PortfolioPage' => 'PortfolioPage'
);
static $has_many = array (
'PortfolioImages' => 'PortfolioImage'
);
…
}PortfolioImage.php
class PortfolioImage extends DataObject {
...
static $has_one = array (
'PortfolioWork' => 'PortfolioWork',
'Attachment' => 'Image'
);
…
}PortfolioPage.php
class PortfolioPage extends Page {
...
public static $has_many = array (
'PortfolioWorks' => 'PortfolioWork'
);
…
}class PortfolioPage_Controller extends Page_Controller {
function TotalWidth() {
$width = 0;
foreach ($this->PortfolioImages() as $portfolioImage) {
$width += $portfolioImage->Attachment()->Width;
}return $width+'px';
}
}Thanks again
-
Re: Calculate images total width
28 March 2011 at 8:26pm
You're just trying to get the total width of images in each PortfolioWork right, not the combined width of all images on the PortfolioPage? It looks like you need to put TotalWidth() in PortfolioWork rather than PortfolioPage, since inside <% control PortfolioWorks %> you're dealing wiht the PortfolioWork rather than the containing page.
-
Re: Calculate images total width
31 March 2011 at 1:18pm
Thanks Nathan, that worked. And I got the jQuery to work as well.
Yes I was just getting the width of each PortfolioWork.
| 1159 Views | ||
|
Page:
1
|
Go to Top |
