Как поместить описание галереи NEXTGEN в jquery-плагин PrettyPhoto в описании или вместо social_tools

как идут дела? Вот у меня такая проблема, не могу разобраться.

Я использую Wordpress, у меня есть галерея NextGen (самая новая на дату 11 января 2012 г.) и плагин PrettyPhoto jquery (также новейшая дата на дату 11 января 2012 г.), у меня оба работают отлично, но мне нужно увидеть каждую галерею NextGen. описание под каждым изображением, которое открывается с помощью плагина PrettyPhoto.

$gallery содержит все, что нам нужно, но она находится в папке NextGen, и я не могу понять, как ее вытащить, кроме как написать mysql SELECT и вытащить все из базы данных, опять же, не знаю, как сделать правильная петля здесь.

Вот ссылка: http://sinergijait.lt/alex/hittoak/photo-gallery/

Вот скрипт prettyphoto, который я использую в header.php:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({
            animation_speed: 'fast', /* fast/slow/normal */
            slideshow: 5000, /* false OR interval time in ms */
            autoplay_slideshow: false, /* true/false */
            opacity: 0.80, /* Value between 0 and 1 */
            show_title: true, /* true/false */
            allow_resize: true, /* Resize the photos bigger than viewport. true/false */
            default_width: 500,
            default_height: 344,
            counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
            theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
            horizontal_padding: 20, /* The padding on each side of the picture */
            hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
            wmode: 'opaque', /* Set the flash wmode attribute */
            autoplay: true, /* Automatically start videos: True/False */
            modal: false, /* If set to true, only the close button will close the window */
            deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
            overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
            keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
            changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
            callback: function(){}, /* Called when prettyPhoto is closed */
            ie6_fallback: true,
            markup: '<div class="pp_pic_holder"> \
                        <div class="ppt">&nbsp;</div> \
                        <div class="pp_top"> \
                            <div class="pp_left"></div> \
                            <div class="pp_middle"></div> \
                            <div class="pp_right"></div> \
                        </div> \
                        <div class="pp_content_container"> \
                            <div class="pp_left"> \
                            <div class="pp_right"> \
                                <div class="pp_content"> \
                                    <div class="pp_loaderIcon"></div> \
                                    <div class="pp_fade"> \
                                        <a href="#" class="pp_expand" title="Expand the image">Expand</a> \
                                        <div class="pp_hoverContainer"> \
                                            <a class="pp_next" href="#">next</a> \
                                            <a class="pp_previous" href="#">previous</a> \
                                        </div> \
                                        <div id="pp_full_res"></div> \
                                        <div class="pp_details"> \
                                            <div class="pp_nav"> \
                                                <a href="#" class="pp_arrow_previous">Previous</a> \
                                                <p class="currentTextHolder">0/0</p> \
                                                <a href="#" class="pp_arrow_next">Next</a> \
                                            </div> \
                                            <p class="pp_description"></p> \
                                            {pp_social} \
                                            <a class="pp_close" href="#">Close</a> \
                                        </div> \
                                    </div> \
                                </div> \
                            </div> \
                            </div> \
                        </div> \
                        <div class="pp_bottom"> \
                            <div class="pp_left"></div> \
                            <div class="pp_middle"></div> \
                            <div class="pp_right"></div> \
                        </div> \
                    </div> \
                    <div class="pp_overlay"></div>',
            gallery_markup: '<div class="pp_gallery"> \
                                <a href="#" class="pp_arrow_previous">Previous</a> \
                                <div> \
                                    <ul> \
                                        {gallery} \
                                    </ul> \
                                </div> \
                                <a href="#" class="pp_arrow_next">Next</a> \
                            </div>',
            image_markup: '<img id="fullResImage" src="{path}" />',
            flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>',
            quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>',
            iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>',
            inline_markup: '<div class="pp_inline">{content}</div>',
            custom_markup: '',
            social_tools: '<div class="pp_social"><div class="need_gallery_desc_here" style="color:black"><?php echo 'need_gallery_desc_here' ?></div></div>'
        });
    });
</script>

Вы можете увидеть это на симпатичном фото, где по умолчанию находится блок social_tools:

social_tools: '<div class="pp_social"><div class="need_gallery_desc_here" style="color:black"><?php echo 'need_gallery_desc_here' ?></div></div>'

Итак, в основном мне нужно вытащить описание (это столбец «galdesc» в базе данных) из галереи $ или из самой базы данных (не знаю, возможно ли первое) И создать цикл, который будет показывать описание галереи на каждом симпатичное фото изображения этой галереи.

Надеюсь, это не прозвучало слишком сложно. Заранее спасибо.

С уважением, Алекс.


person Community    schedule 11.01.2012    source источник


Ответы (1)


Чтобы добавить описание к изображению, используйте атрибут title.

<ul class="gallery clearfix">
<li><a href="images/fullscreen/1.JPG?lol=lol" rel="prettyPhoto[gallery1]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a>
</li>
</ul>

Или вы можете персонализировать свои описания, например, с помощью атрибута data-desc.

<a href="" rel="fotos[galeria]" data-desc="Description">Examinar en Mapa</a>

Затем в красивом источнике фотографий вы должны изменить эту строку

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){   if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).attr('data-desc')) ? $(n).attr('data-desc') : ""; }) : $.makeArray($(this).attr('data-desc'));

Надеюсь это поможет

person Caleb    schedule 18.07.2013