How to activate the lightbox?


#1

Right now, I’ve added some custom code from @joshuaabenazer.

function show_last_n_images($n = 5) {  
    if ($user_id = bp_displayed_user_id()) {  
        $model = new RTMediaModel();  
        $results = $model->get(array('media_type' => 'photo', 'media_author' => $user_id), 0, $n);  
        if ($results) {  
            echo '';  
        }  
    }  
}

It adds the recently uploaded media to a member’s header, like this:

http://i.imgur.com/ASs5m6W.png

My problem is, when you click on a thumbnail, it takes you to that media’s permalink instead of popping up the lightbox as usual. What code would I have to add to trigger the lightbox?


#2

Hello @mdbob,

Can you please change the class name of the

    from “item-list” to “rtmedia-list-media” and check if it works for you.

    Regards


#3

That worked perfect! Thank you very much for your help.


#4

Nice to here that your Lightbox works for you.

Please let us know if you have any further queries.


#5

@mdbob: care to share your css for styling that?


#6

This is what I added to member-header.php

<? show_last_n_images(); ?>

And here’s the styling:

div#item-recent-user-images ul.rtmedia-list-media {  
	width: 100%;  
	margin: 0px;  
}  

div#item-recent-user-images ul.rtmedia-list-media li img {  
	width: 70px;  
	height: 70px  
}  
div#item-recent-user-images ul.rtmedia-list-media li {  
	float: left !important;  
}  

div#item-recent-user-images ul.rtmedia-list-media li {  
	padding: 5px 5px 0px 5px;  
	margin: 0 4px 10px 0;  
	border: 1px solid #CECECE;  
	background: #F8F8F8;  
}

#7

Thank you! Saves me a bit of time.


#8

Any idea how I would update this for group pages, to load the recent media from a group in the group header?


#9

@mdbob, use this function in a group’s page to get recent photos uploaded in a group.

function show_last_n_images_group($n = 5) {  
    if ($group_id = bp_get_current_group_id()) {  
        $model = new RTMediaModel();  
        $results = $model->get(array('media_type' => 'photo', 'context' => 'group', 'context_id' => $group_id), 0, $n);  
        if ($results) {  
            echo '';  
        }  
    }  
}

#10

If this is useful for anyone, I use this CSS:

/*Centrar las imágenes bp-media en el header*/  
#buddypress div#item-header ul {  
    list-style-type: none;  
    padding-left: 2% !important;  
    }  
/*Acomodar tamaño y márgenes de las imágenes bp-media en el header*/  
#buddypress div#item-header ul li {  
float: left !important;  
width: 18%;  
margin-right: 2%;  
}

That one resizes the images according to the screen resolution keeping the 5 images in a single line always.

Thanks to all of You who share your knowledge!


#11

Does anyone know how to show an upload box as in the widget in the header when the user still not have the 5 images?

Long explanation: If there are 5 images, the code in this topic works to show that 5 images, but if the user has just 4 images or less, there are white spaces where the other images goes, so my question is if there is a way to use an “if there is no image yet then upload box, else image”, in example if there is not any image upload, 5 boxes to upload, if the user uploads a photo, an image and 4 boxes and so on.

Sorry for my english and thanks for your time.

P.S. See the attachment (That’s paint)

Attachment Link(s):

https://rtcamp.com/wp-content/uploads/rtMedia/topics/55576/2014/01/ejemplo.jpg


#12

Hello everyone

This function is awesome, but is there any way to display the first pictures instead of? Something like "function show_FIRST_n_images($n = 5)"

Thanks


#13

@pics, Use same code pasted by @mdbob. Just change the call to get() method.

$results = $model->get(array('media_type' => 'photo', 'media_author' => $user_id), 0, $n, 'media_id');

It will get media in ascending order.


#14

Wow works great clear and simple. Thanks a lot!


#15

shows the error Parse error: syntax error, unexpected ‘"’, expecting ‘,’ or ‘;’ in …wp-content/plugins/bp-custom.php on line 12


#16