0 / 0 / 0
Регистрация: 14.02.2015
Сообщений: 8
1

Возможно ли интегрировать HTML-плагин в WordPress?

20.12.2015, 16:54. Показов 537. Ответов 0

Author24 — интернет-сервис помощи студентам
Купил на codecanyon.net плагин галереи, вот этот. По сути он не является плагином для вордпресс, но я слышал, что его можно интегрировать в эту CMS. У этого плагина есть своя панель настроек, но я пока не могу понять, как она запускается. При этом есть инструкция, но я даже после перевода не могу понять с чего начать интеграцию. По этому у меня вопрос: возможно ли интегрировать такой плагин в Вордпресс? Если возможно, то с чего начать? Фрагмент инструкции выложу здесь.
Заранее благодарен.
C) Ultimate Grid Pro installation
UGP has multiple display types (responsive, fluid width, fullscreen and after parent), each display type is explained in detail below, to modify the display type just change the displayType property in the constructor. Please read the Constructor parameters section.

Responsive installation
In the download files there is a start folder and in this folder there are example html files. You can use one of them to copy and paste the required html and js code with all the presets. In this tutorial we have used the ch-1.html file.
Copy and paste the content folder and the java folder into the same folder with your html file, inside the content folder there are other folders and files which are self explanatory.
Open ch-1.html with a text editor as reference.
The javascript and CSS files must be imported in the head section of your html.
HTML5
1
2
<link rel="stylesheet" type="text/css" href="content/global.css">
<script type="text/javascript" src="java/FWDUGP.js"></script>
You need a div into which UGP will be added as a child, so create a div and set an id for it, the id is important because it is passed in the UGP constructor, make sure it is unique. The UGP is responsive as follows, the width and height will adapt based on the maxWidth and maxHeight properties specified in the constructor, if the page is resized and the parent div width is smaller then the maxWidth property UGP will adapt it's size accordingly. If autoScale property is set to yes the grid will modify it's height to keep a correct aspect ratio.
HTML5
1
<div id="myDiv"></div>
Next step is to set up the categories / playlists, to do this copy and paste the div element with the id myPlaylist into the body element, the id is passed to the UGP parameter playlistId:myPlaylist. For more info about playlist types and how to create them read the Setup categories / playlists section.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div id="myPlaylist" style="display:none">
    <ul data-category-name="MULTIMEDIA GALLERY">
    <li data-url="content/media/images/a1.jpg">
        <img src="content/media/thumbnails/a1.jpg" alt="custom alt">
        <div data-thumbnail-content1="">
            <div class="centerDark">IMAGE DISPLAY</div>
        </div>
        <div data-lightbox-desc="">
            <p class="gallery1DecHeader">Ultimate Grid Pro</p>
            <p class="gallery1DescP">Multimedia grid for your website that can only be found on sale here, it runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows8.</p>
        </div>
    </li>
    <!-- Rest can be viewed in the html file -->
</ul>
 
<ul data-category-name="IMAGE GALLERY" style="display:none">
    <li data-url="content/media/images/n15.jpg">
        <img src="content/media/thumbnails/n15.jpg" alt="custom alt">
        <div data-thumbnail-content1="">
            <div class="centerDark">IMAGE 1</div>
        </div>
        <div data-lightbox-desc="">
            <p class="gallery1DecHeader">Ultimate Grid Pro</p>
            <p class="gallery1DescP">Multimedia grid for your website that can only be found on sale here, it runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows8.</p>
        </div>
    </li>
    <!-- Rest can be viewed in the html file -->
</ul>
 
<ul data-category-name="MIXED GALLERY">
    <li data-url="content/media/images/n23.jpg" data-extra-button-url="http://www.webdesign-flash.ro" data-extra-button-target="_blank">
        <img src="content/media/thumbnails/n23.jpg" alt="custom alt">
        <div data-thumbnail-content1="">
            <div class="centerDark">IMAGE DISPLAY</div>
        </div>
        <div data-lightbox-desc="">
            <p class="gallery1DecHeader">Ultimate Grid Pro</p>
            <p class="gallery1DescP">Multimedia grid for your website that can only be found on sale here, it runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows8.</p>
        </div>
    </li>
    <!-- Rest can be viewed in the html file -->
</ul>
     
</div>
Next step is to initialize UGP with javascript, in the head section of your html page add the code from below. Please note that all parameters are described in the Constructor parameters section.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<script type="text/javascript">
    FWDRLUtils.onReady(function(){
        new FWDUGP({
            //main settings 
            gridType:"classicHorizontal",
            displayType:"responsive",
            rightClickContextMenu:"default",
            instanceName:"myUGP",
            parentId:"myDiv",
            mainFolderPath:"content",
            gridSkinPath:"grid_skin_classic",
            lightboxSkinPath:"lightbox_skin_classic",
            playlistId:"myPlaylist",
            allCategoriesLabel:"ALL GALLERIES",
            autoScale:"yes",
            showFullScreenButton:"yes",
            addMouseWheelSupport:"no",
            showAllCategories:"yes",
            randomizeCategories:"no",
            backgroundColor:"#000000",
            zIndex:0,
            startAtCategory:0,
            maxWidth:900,
            maxHeight:827,
            //menu settings
            menuType:"list",
            showMenu:"yes",
            multipleCategorySelection:"yes",
            showMenuButtonsSpacers:"no",
            showTotalThumbnailsPerCategory:"yes",
            showSearchBox:"yes",
            centerNoSearchFoundLabelWithMenu:"yes",
            comboboxSelectorLabel:"SELECT GALLERIES",
            menuPosition:"left",
            searchLabel:"search",
            searchNotFoundLabel:"NO RESULT FOUND!",
            comboboxArrowNormalColor:"#FFFFFF",
            comboboxArrowSelectedColor:"#000000",
            menuButtonSpacerWidth:1,
            menuButtonSpacerHeight:20,
            menuButtonsSapcerLeftAndRight:20,
            menuMaxWidth:920,
            menuOffsetTop:25,
            menuOffsetBottom:25,
            horizontalSpaceBetweenMenuButtons:10,
            verticalSpaceBetweenMenuButtons:20,
            //thumbnail settings
            thumbnailLoadingType:"loadMoreWithButton",//loadMoreWithButton, loadMoreOnScroll
            hideAndShowTransitionType:"scale",
            thumbanilBoxShadow:"none",
            disableThumbnails:"no",
            inverseButtonsIcons:"no",
            thumbnailBackgroundColor:"#333333",
            thumbnailBorderNormalColor:"#FFFFFF",
            thumbnailBorderSelectedColor:"#c1c1c1",
            howManyThumbnailsToDisplayPerSet:19,
            thumbnailsHorizontalOffset:0,
            thumbnailsVerticalOffset:0,
            thumbnailMaxWidth:278,
            thumbnailMaxHeight:188,
            horizontalSpaceBetweenThumbnails:0,
            verticalSpaceBetweenThumbnails:0,
            thumbnailBorderSize:0,
            thumbnailBorderRadius:0,
            //load more button settings
            loadMoreButtonLabel:"LOAD MORE THUMBNAILS",
            loadMoreButtonOffsetTop:25,
            loadMoreButtonOffsetBottom:25,
            //preset settings
            preset:"animtext",
            textVerticalAlign:"center",
            textAnimationType:"scale",
            useIconButtons:"no",
            thumbnailOverlayColor:"#FFFFFF",
            thumbnailOverlayOpacity:.8,
            thumbnailIconWidth:30,
            thumbnailIconHeight:29,
            spaceBetweenThumbanilIcons:12,
            spaceBetweenTextAndIcons:10,
            //ligtbox settings (optional)
            facebookAppId:"213684265480896",
            buttonsAlignment:"in",
            itemBoxShadow:"none",
            descriptionWindowAnimationType:"opacity",
            descriptionWindowPosition:"bottom",
            useAsModal:"no",
            slideShowAutoPlay:"no",
            addKeyboardSupport:"yes",
            showCloseButton:"yes",
            showFacebookButton:"yes",
            showZoomButton:"yes",
            showSlideShowButton:"yes",
            showSlideShowAnimation:"yes",
            showNextAndPrevButtons:"yes",
            showNextAndPrevButtonsOnMobile:"yes",
            showDescriptionButton:"yes",
            showDescriptionByDefault:"no",
            videoShowFullScreenButton:"yes",
            videoAutoPlay:"no",
            nextVideoOrAudioAutoPlay:"yes",
            videoLoop:"no",
            audioAutoPlay:"no",
            audioLoop:"no",
            backgroundOpacity:.9,
            descriptionWindowBackgroundOpacity:.95,
            buttonsHideDelay:3,
            slideShowDelay:4,
            defaultItemWidth:640,
            defaultItemHeight:480,
            itemOffsetHeight:50,
            spaceBetweenButtons:1,
            buttonsOffsetIn:2,
            buttonsOffsetOut:5,
            itemBorderSize:0,
            itemBorderRadius:0,
            itemBackgroundColor:"#333333",
            itemBorderColor:"#333333",
            lightBoxBackgroundColor:"#000000",
            descriptionWindowBackgroundColor:"#FFFFFF",
            videoPosterBackgroundColor:"#0099FF",
            videoControllerBackgroundColor:"#FFFFFF",
            audioControllerBackgroundColor:"#FFFFFF",
            timeColor:"#000000"
        });
    });
</script>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.12.2015, 16:54
Ответы с готовыми решениями:

WordPress и возможно существующий модуль(плагин), тема. Для создания гибких запросов к БД MySQL
Хотелось бы выяснить, если готовый инструментарий(тема), чтобы я мог вести БД(заполнять/удалять...

Интегрировать свой php файл в тему Wordpress
Здравствуйте! Недавно начал изучать веб. Использую готовую бесплатную тему для вордпресс. Так-же...

Wordpress написать плагин
прочитал несколько статей для начинающих. Но немогу найти инфу как сделать так как я видел во...

Подскажите плагин WordPress
Ребята подскажите плагин для WordPress для сайта-каталога который будит отличаться от интернет...

0
20.12.2015, 16:54
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.12.2015, 16:54
Помогаю со студенческими работами здесь

Плагин для WordPress
Добрый день всем. Не подскажите где можно найти такой плагин как на http://media.ministersky.ua/.

Не переводится плагин на WordPress
Сразу говорю, что в WP я не силён, так, тэг могу скопировать. В общем такой трабл - при переводе...

Плагин календаря на Wordpress
Всем добрый день! Возможно вы знаете плагин календаря в котором есть возможность отмечать цветами...

Почему не работает плагин в WordPress 5?
Кто бы обьяснил, почему не рабоатет этот плагин в Wordpress 5? Я не понимаю, плагины практически...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru