I have photos stored in the database. Each user has his own photos. When he enters the page for the first time I want to show just a feu of them (5 for example). Then he clicks on the photo and the gallery opens (I looked through JQuery), but in this
gallery I want him to see all his photos. I checked JQuery colorbox (it looks like I want), but I can't change the content, it displays just photos already loaded on the page. What can you suggest? I will appreciate any help. Thanks in advance.
I don't see the problem....when user click the foto you either go to a new page that shows the gallery, or triiger an ajax update that load a part of the page that contains the gallery.
Action NumberPhotos returns the number of photos in your database. The action GetPhoto1 returns file with photo. I have the counter here to return each photo from the database:
int photo_count;
public FileResult GetPhoto1(int id)
{
DataBase db = new DataBase();
IEnumerable<Photo_file> photos = db.SelectPhotos(1);
int count = photos.Count();
byte[] buffer = new byte[1];
photo_count = 1;
foreach (Photo_file photo in photos)
{
if (id == photo_count)
{
string ph = photo.photo.ToString();
buffer = photo.photo.ToArray();
break;
}
photo_count++;
}
return File (buffer, "images/png");
}
Then I initialize colorbox and set it to open. After this I set my counter (used in the action GetPhoto1) to 1 in the action ResetNumberPhotos:
public void ResetNumberPhotos(int photo_count)
{
this.photo_count = photo_count;
}
Musya
Member
60 Points
29 Posts
Dinamical content for JQuery gallery colorbox
Feb 29, 2012 01:39 PM|LINK
Hi guys!
I have photos stored in the database. Each user has his own photos. When he enters the page for the first time I want to show just a feu of them (5 for example). Then he clicks on the photo and the gallery opens (I looked through JQuery), but in this gallery I want him to see all his photos. I checked JQuery colorbox (it looks like I want), but I can't change the content, it displays just photos already loaded on the page. What can you suggest? I will appreciate any help. Thanks in advance.
francesco ab...
All-Star
20912 Points
3279 Posts
Re: Dinamical content for JQuery gallery colorbox
Feb 29, 2012 08:24 PM|LINK
I don't see the problem....when user click the foto you either go to a new page that shows the gallery, or triiger an ajax update that load a part of the page that contains the gallery.
Mvc Controls Toolkit | Data Moving Plug-in Videos
Musya
Member
60 Points
29 Posts
Re: Dinamical content for JQuery gallery colorbox
Mar 01, 2012 06:34 AM|LINK
I've already solved it in a bit different way, but thanks a lot for the advice!
Young Yang -...
All-Star
21343 Points
1818 Posts
Microsoft
Re: Dinamical content for JQuery gallery colorbox
Mar 02, 2012 07:03 AM|LINK
Hi
Could you share your solution on this, maybe it will help others, thanks a lot!
Regards
Young Yang
Feedback to us
Develop and promote your apps in Windows Store
Musya
Member
60 Points
29 Posts
Re: Dinamical content for JQuery gallery colorbox
Mar 05, 2012 07:15 AM|LINK
In the view I have an ampty div and a link:
<div id="loaded_content" style="visibility: hidden"></div>
<p><a id="test" href="#">See all photo files</a></p>
If you store photos in the database like I do then you will generate links for gallery this way (this code is in the view too):
<script type="text/javascript">
$('#test').click(function () {
$.ajax({
type: "POST",
url: '/Home/NumberPhotos',
success: function (r) {
var photoCount = r.data;
for (var i = 1; i <= photoCount; i++) {
var content = $('#loaded_files').html() + "<a class='loaded_files' href='/Home/GetPhoto1/" + i + "' rel='loaded_files' ><img src='/Home/GetPhoto1/'" + i + " width='0px' height='0px'/></a>";
$('#loaded_files').html(content);
}
jQuery('a.loaded_files').colorbox({ rel: 'a.loaded_files',
transition: 'none',
width: '60%',
height: '85%',
photo: true,
open: true,
slideshow: true,
onClosed: function () {
$('#loaded_files').html('');
}
});
}
});
$.ajax({
type: "POST",
url: '/Home/ResetNumberPhotos',
data: "photo_count=1"
});
});
</script>
Action NumberPhotos returns the number of photos in your database. The action GetPhoto1 returns file with photo. I have the counter here to return each photo from the database:
int photo_count;
public FileResult GetPhoto1(int id)
{
DataBase db = new DataBase();
IEnumerable<Photo_file> photos = db.SelectPhotos(1);
int count = photos.Count();
byte[] buffer = new byte[1];
photo_count = 1;
foreach (Photo_file photo in photos)
{
if (id == photo_count)
{
string ph = photo.photo.ToString();
buffer = photo.photo.ToArray();
break;
}
photo_count++;
}
return File (buffer, "images/png");
}
Then I initialize colorbox and set it to open. After this I set my counter (used in the action GetPhoto1) to 1 in the action ResetNumberPhotos:
public void ResetNumberPhotos(int photo_count)
{
this.photo_count = photo_count;
}
That's all