Next and Previous using lightbox?
13 posts by 5 authors in: Forums > CMS Builder
Last Post: December 6, 2010 (RSS)
Hi all,
Not sure if anyone will be able to help with this one, I am just putting a photo album together and have come across a couple of issues;
1) Is there a way to get cmsb to determine whether an image is landscape or portrait and allocate the spacing accordingly to prevent the extra white space between images? you can see an example at http://www.bridlington.net/gallery.php I dont like the odd spacing, It wouldnt be a problem if it sorted portrait ones into a seperate table below so long as the spacing was better. The section used has been created with a single record which just has lots of images uploaded with no other fields, perhaps there is a way to add an additional info field (similar to title and caption) which I could place a P or L into that the page code could sort on somehow. As I dont have any php programming knowledge I dont want to waste hourse playing around with something which isnt possible.
2) I would also like viewers to be able to scroll through the enlarged versions of the images after they load up in lightbox, apparently there is a previous and next feature however they dont show for some reason, again is there a way to implement this so that viewers dont continually have to close an image and click on the next one.
Thanks in advance for any help provided, it is appreciated.
Not sure if anyone will be able to help with this one, I am just putting a photo album together and have come across a couple of issues;
1) Is there a way to get cmsb to determine whether an image is landscape or portrait and allocate the spacing accordingly to prevent the extra white space between images? you can see an example at http://www.bridlington.net/gallery.php I dont like the odd spacing, It wouldnt be a problem if it sorted portrait ones into a seperate table below so long as the spacing was better. The section used has been created with a single record which just has lots of images uploaded with no other fields, perhaps there is a way to add an additional info field (similar to title and caption) which I could place a P or L into that the page code could sort on somehow. As I dont have any php programming knowledge I dont want to waste hourse playing around with something which isnt possible.
2) I would also like viewers to be able to scroll through the enlarged versions of the images after they load up in lightbox, apparently there is a previous and next feature however they dont show for some reason, again is there a way to implement this so that viewers dont continually have to close an image and click on the next one.
Thanks in advance for any help provided, it is appreciated.
Re: [willydoit] Next and Previous using lightbox?
By Chris - November 29, 2010
Hi willydoit,
Allow me to answer your questions in reverse order. :)
2. You'll need to give your images a "lightbox group" to make the prev/next feature work. To do this, change rel="lightbox" to rel="lightbox[myGroupName]", using the same group name for all your images.
1. Anything is possible in your viewers with PHP! Let's say that "landscapes" are images that have width > height, while "portraits" are everything else. Here's an example where we loop through your images twice, the first time we ignore portraits and the second time we ignore landscapes:
Does that help? Please let me know if you have any questions.
Allow me to answer your questions in reverse order. :)
2. You'll need to give your images a "lightbox group" to make the prev/next feature work. To do this, change rel="lightbox" to rel="lightbox[myGroupName]", using the same group name for all your images.
1. Anything is possible in your viewers with PHP! Let's say that "landscapes" are images that have width > height, while "portraits" are everything else. Here's an example where we loop through your images twice, the first time we ignore portraits and the second time we ignore landscapes:
<table>
<tr>
<?php $count = 0; ?>
<?php foreach ($myRecord['uploads'] as $upload): ?>
<?php if ($upload['thumbWidth'] > $upload['thumbHeight']): ?>
<td>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[myGroupName]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" title="<?php echo $upload['info1'] ?>" />
</a>
</td>
<?php if (++$count % 5 == 0) { echo "</tr><tr>"; } ?>
<?php endif ?>
<?php endforeach ?>
</tr>
</table>
<table>
<tr>
<?php $count = 0; ?>
<?php foreach ($myRecord['uploads'] as $upload): ?>
<?php if (!($upload['thumbWidth'] > $upload['thumbHeight'])): ?>
<td>
<a href="<?php echo $upload['urlPath'] ?>" rel="lightbox[myGroupName]" title="<?php echo $upload['info1'] ?>">
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" title="<?php echo $upload['info1'] ?>" />
</a>
</td>
<?php if (++$count % 7 == 0) { echo "</tr><tr>"; } ?>
<?php endif ?>
<?php endforeach ?>
</tr>
</table>Does that help? Please let me know if you have any questions.
All the best,
Chris
Chris
Re: [willydoit] Next and Previous using lightbox?
By willydoit - November 30, 2010 - edited: November 30, 2010
Hi Chris,
Thanks very much for that, I will play around with it later today and advise if I have any issues.
Top class help and support as always.
Have incorporated your code and everything works brilliantly, thanks again for your help, saved me hours of messing about and possibly still not coming up with a working solution.
Thanks very much for that, I will play around with it later today and advise if I have any issues.
Top class help and support as always.
Have incorporated your code and everything works brilliantly, thanks again for your help, saved me hours of messing about and possibly still not coming up with a working solution.
Re: [willydoit] Next and Previous using lightbox?
Just wondering if the group name can be pulled from the section editors?
Re: [dccreatives] Next and Previous using lightbox?
Hi,
I just added the group Bridlington and because all my images have the word Bridlington in the title everything seemed to work straight away.
I just added the group Bridlington and because all my images have the word Bridlington in the title everything seemed to work straight away.
Re: [willydoit] Next and Previous using lightbox?
By Chris - December 2, 2010
Hi folks,
I don't believe the group name shows up anywhere, except in View Source. You can use anything you want, as long as you use the same group name for all your images, for example:
Group names can also be used to provide multiple "groups" of images on a page, so that you can page through one group of images without "nexting" into another group.
I don't believe the group name shows up anywhere, except in View Source. You can use anything you want, as long as you use the same group name for all your images, for example:
rel="lightbox[allImages]"Group names can also be used to provide multiple "groups" of images on a page, so that you can page through one group of images without "nexting" into another group.
All the best,
Chris
Chris
Re: [chris] Next and Previous using lightbox?
Okay, just to clarify the group name is added to the rel="lightbox[set1]" command and the images themselves in this example would be called set-1.jpg set1-2.jpg etc but anything called set2-1.jpg wouldnt be included in the previous and next sequence but would be shown on the thumbnail page as no sort criteria has been applied when generating the initial page, is that correct?
If the above is correct how simple would it be to add into the code supplied above by Chris the ability to create a filtered thumbnail display to allow a small menu to be created to allow the sorting of the images based upon the group name? So viewers could select whether they wished to see only images of certain criteria ie beach, town, people etc.
If the above is correct how simple would it be to add into the code supplied above by Chris the ability to create a filtered thumbnail display to allow a small menu to be created to allow the sorting of the images based upon the group name? So viewers could select whether they wished to see only images of certain criteria ie beach, town, people etc.
Re: [willydoit] Next and Previous using lightbox?
By Jason - December 3, 2010
Hi,
The images themselves can have any name. The only thing that determines whether or not an image is in a group is the groupname.
For example, all images that use rel="lightbox[set1]" would be in one group. All images that use rel="lightbox[myGroup]" would be in one group. The actual group name can be anything you want as long as all the images that you want in one group use the same group name.
As for using group names to sort images, it really doesn't make sense to do that. You could create some code that would only output images from records with a certain category. If you could give some more details on how you've organized your images and how you would like to sort them, we can help you out with some options.
Hope this helps.
The images themselves can have any name. The only thing that determines whether or not an image is in a group is the groupname.
For example, all images that use rel="lightbox[set1]" would be in one group. All images that use rel="lightbox[myGroup]" would be in one group. The actual group name can be anything you want as long as all the images that you want in one group use the same group name.
As for using group names to sort images, it really doesn't make sense to do that. You could create some code that would only output images from records with a certain category. If you could give some more details on how you've organized your images and how you would like to sort them, we can help you out with some options.
Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Re: [Jason] Next and Previous using lightbox?
By Codee - December 5, 2010
So, to do this group setting automatically in CMSB created records....let's say you have a section for "Products" and you have a "master image" field and an "additional images" field that allows 25 additional photos of the product and you want these to be in a group, ONLY for that particular product -- THEN, if you're setting up the data fields on the CMSB backend for the product, do you add a field called "groupname" or "lightbox group" for that type of record and code the additional graphics portion of the viewerDetails page with rel="lightbox[groupname]" or rel="lightbox[lightbox_group]" ? Would that enable the details viewer page for a single product to utilize the additional images for just that product without running into the next product's additional images?
Re: [equinox69] Next and Previous using lightbox?
By Jason - December 6, 2010
Hi,
Yes, what you're saying is possible. But on a detail page you'd only be viewing one record and the images associated with that record, so I'm not sure how you would end up displaying "the next product's additional images".
I would suggest giving it a try and seeing what results you get. That way, if you run into any issues, we'll have actual code to take a look at.
Hope this helps.
Yes, what you're saying is possible. But on a detail page you'd only be viewing one record and the images associated with that record, so I'm not sure how you would end up displaying "the next product's additional images".
I would suggest giving it a try and seeing what results you get. That way, if you run into any issues, we'll have actual code to take a look at.
Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/