multiple wppa slideshows on one page
-
I am wanting to set up multiple slideshows on one page, side by side, no borders.
Perhaps like a grid, 4 x 5, 20 slideshows, from different galleries.
Need to be borderless like the widget slideshow. How can I do this?
Here is a link to a picture of what i mean:
https://www.facesforfundraising.com/wp-content/uploads/2016/03/wppa-multiple-slideshows.jpg
-
Here is an example: https://beta.opajaap.nl/multislideshow/
and here is the code i entered using the TEXT editor ( NOT the VISUAL ):
<style>.wppa-container{ clear:none !important; height:120px !important; }</style> <center> <div style="width:480px;" > [wppa_set name="wppa_fullsize" value="120"][/wppa_set] [wppa_set name="wppa_maxheight" value="120"][/wppa_set] [wppa type="slideonly" album="72" size="0.25" align="left"][/wppa][wppa type="slideonly" album="68" size="0.25" align="left"][/wppa][wppa type="slideonly" album="221" size="0.25" align="left"][/wppa][wppa type="slideonly" album="236" size="0.25" align="left"][/wppa][wppa type="slideonly" album="233" size="0.25" align="left"][/wppa][wppa type="slideonly" album="242" size="0.25" align="left"][/wppa][wppa type="slideonly" album="120" size="0.25" align="left"][/wppa][wppa type="slideonly" album="207" size="0.25" align="left"][/wppa][wppa type="slideonly" album="214" size="0.25" align="left"][/wppa][wppa type="slideonly" album="216" size="0.25" align="left"][/wppa][wppa type="slideonly" album="72" size="0.25" align="left"][/wppa][wppa type="slideonly" album="68" size="0.25" align="left"][/wppa][wppa type="slideonly" album="221" size="0.25" align="left"][/wppa][wppa type="slideonly" album="236" size="0.25" align="left"][/wppa][wppa type="slideonly" album="233" size="0.25" align="left"][/wppa][wppa type="slideonly" album="242" size="0.25" align="left"][/wppa][wppa type="slideonly" album="120" size="0.25" align="left"][/wppa][wppa type="slideonly" album="207" size="0.25" align="left"][/wppa][wppa type="slideonly" album="214" size="0.25" align="left"][/wppa][wppa type="slideonly" album="216" size="0.25" align="left"][/wppa] [wppa_set][/wppa_set] </div> </center>
A few notes:
– To get square images, i created square clipped thumbnails ( Table I-C2, Table VIII-A4 )
– To use the thumbnails in the slideshow, i ticked Table I-C9.
– The example is a block 480 px wide, with 4 on a row, each 120 px wide on a responsive theme. The block is wrapped in a centered div.
To force the slideshow using the thumbs and displaying them square, i temporary set the width and height of the slide to 120 px. using the wppa_set shortcode. See https://wppa.opajaap.nl/using-in-line-settings/
– Do NOT place spaces or newlines between the wppa shortcodes; it would damage the layout.ok great, i am sure this will get me what i need, i will work on it and thanks!
ok, so, i did some tests and the only issue is, now it takes a long time to load the page… is there some other setting i could do to make the page load quicker?
I did some research and have the following improvements:
Add
[wppa_set name="wppa_slideshow_linktype" value="none"][/wppa_set] [wppa_set name="wppa_show_browse_navigation" value="no"][/wppa_set] [wppa_set name="wppa_rating_on" value="no"][/wppa_set]
to the list of the other wppa_set shortcodes.
Also add the names to Table IX-A8 as usual.Install the current development version ( See: https://wppa.opajaap.nl/how-to-install-the-newest-development-version/ ). I changed some code to prevent the generation of unused html for slideonly slideshows.
Applying both on my test site results in a good performance improvement.
Thanks, also, it looks like what it comes down to is galleries with less images load faster. Thanks!
But ok, so on your site example, you can click on the grid thumbs and it will load the image or bring up a description. I want to be able to do that too… or at least on one of the galleries in the grid.
For example, on a grid of 4 x 5, i might want gallery 11 to be the “main gallery of my grid, meaning, i want thoe images in that slideshow to display name, decription, etc under the entire grid.
How can i do that?
also, your images dont have a thin gray line around them like mine do, what setting to remove that line, i set borders to 0.
Table I-B4 must be blank, not 0, to remove the one pixel gray border. See the help under the [?]
Did you tick the ‘use thumb if fit’ box in Table I-C9? I still see the large images being loaded.
The slideonly slideshow does not look at the slideshow page size.
What if i add a setting to limit the number of slides in a slideonly slideshow, and we set the sort-order to random, using the wppa_set shortcode?
This would limit the generated html to only a few slides – say 5 -, while a new page load will give a small selection of different images out of the album, suggesting a larger selection.I removed all links by
[wppa_set name="wppa_slideshow_linktype" value="none"][/wppa_set]
to reduce the html.You can leave this one out to get the default links, but if you link to lightbox AND you have large descriptions that are shown on the lightbox display, it will generate a lot of html.
ok, thanks….
Here is my other grid project.
a set up that base images are square in galleries 216px x 216px
is suppose to show up 3 across, 3 down grid…(but shows up as 4 across) why?I set it to 216px and 648px to make it three galleries of 216px eaach but it still shows 4 across.
Here is the link https://www.facesforfundraising.com/buff/
Here is coding i used:
<style>.wppa-container{
clear:none !important;
height:216px !important;
}</style>
<center>
<div style=”width:648px;” >
[wppa_set name=”wppa_fullsize” value=”216″][/wppa_set]
[wppa_set name=”wppa_maxheight” value=”216″][/wppa_set]
[wppa type=”slideonly” album=”11″ size=”0.25″ align=”left”][/wppa][wppa type=”slideonly” album=”12″ size=”0.25″ align=”left”][/wppa][wppa type=”slideonly” album=”13″ size=”0.25″ align=”left”][/wppa][wppa type=”slideonly” album=”14″ size=”0.25″ align=”left”][/wppa][wppa type=”slideonly” album=”15″ size=”0.25″ align=”left”][/wppa][wppa type=”slideonly” album=”16″ size=”0.25″ align=”left”][/wppa][wppa type=”slideonly” album=”17″ size=”0.25″ align=”left”][/wppa][wppa type=”slideonly” album=”18″ size=”0.25″ align=”left”][/wppa][wppa type=”slideonly” album=”19″ size=”0.25″ align=”left”][/wppa]
</div>
</center>
[wppa_set name=”wppa_slideshow_linktype” value=”none”][/wppa_set]
[wppa_set name=”wppa_show_browse_navigation” value=”no”][/wppa_set]
[wppa_set name=”wppa_rating_on” value=”no”][/wppa_set]ok ok, i seee, i had to change the size=.025 for 4 across to size = .333 for 3 across…. leaves a tiny white line though on a 3 x 3 grid.
now if i could just make the middle galleria searchable and clickable, to display text, custom field(s), name or desciption and share buttons below or above all galleries.
removed lines by adding adittional pixel, so all that is left on this project is to make middle gallery searchable and display the name, description, etc, and social sharing below or above entire gallery set. if you have any suggestions let me know. Thanks!
See, people are goign to upload their “hearts” to the middle gallery and will supply name and other message. I want to make it searchable, then display the name and messsage below the entire gallery (from description and custom fields.)
In your example above, you have 3 wppa_set shortcodes below the wppa shortcodes. This means that they do not work.
They work in the sequence order they appear on the page.To have the center of 9 linked to lightbox, do the following ( and remove the linebreaks! ):
<style>.wppa-container{clear:none !important;height:216px !important;}</style> <center><div style="width:648px;" > [wppa_set name="wppa_fullsize" value="216"][/wppa_set] [wppa_set name="wppa_maxheight" value="216"][/wppa_set] [wppa_set name="wppa_slideshow_linktype" value="none"][/wppa_set] [wppa_set name="wppa_show_browse_navigation" value="no"][/wppa_set] [wppa_set name="wppa_rating_on" value="no"][/wppa_set] [wppa type="slideonly" album="11" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="12" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="13" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="14" size="0.25" align="left"][/wppa] [wppa_set name="wppa_slideshow_linktype" value="lightbox"][/wppa_set] [wppa type="slideonly" album="15" size="0.25" align="left"][/wppa] [wppa_set name="wppa_slideshow_linktype" value="none"][/wppa_set] [wppa type="slideonly" album="16" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="17" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="18" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="19" size="0.25" align="left"][/wppa] </div></center>
You can have the social media buttons onj the lightbox, but not from the center slideshow below the entire display.
Note: You can not have a link to the same page using ajax; the wppa_set directives will not work in that case.ok great, thanks… and how about if i want to link the senter slideshow to a different page with a standard slideshow (rather than lightbox)? that should be the last thing I need.
and i want to add a search gallery feature to the page so people can search for theirs fropm gallery #15 and then it would take them to a landing page where the slideshow is.
First create the target page, with the appropriate shortcode on it.
Remember the page’s id ( you can see that in the browserwindow when you save the mage ).Assume page id is 4711.
Now, in the above list of shortcodes, change:
[wppa_set name="wppa_slideshow_linktype" value="lightbox"][/wppa_set]
into:
[wppa_set name="wppa_slideshow_linktype" value="plainpage"][/wppa_set] [wppa_set name="wppa_slideshow_linkpage" value="4711"][/wppa_set]
So it becomes:
<style>.wppa-container{clear:none !important;height:216px !important;}</style> <center><div style="width:648px;" > [wppa_set name="wppa_fullsize" value="216"][/wppa_set] [wppa_set name="wppa_maxheight" value="216"][/wppa_set] [wppa_set name="wppa_slideshow_linktype" value="none"][/wppa_set] [wppa_set name="wppa_show_browse_navigation" value="no"][/wppa_set] [wppa_set name="wppa_rating_on" value="no"][/wppa_set] [wppa type="slideonly" album="11" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="12" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="13" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="14" size="0.25" align="left"][/wppa] [wppa_set name="wppa_slideshow_linktype" value="plainpage"][/wppa_set] [wppa_set name="wppa_slideshow_linkpage" value="4711"][/wppa_set] [wppa type="slideonly" album="15" size="0.25" align="left"][/wppa] [wppa_set name="wppa_slideshow_linktype" value="none"][/wppa_set] [wppa type="slideonly" album="16" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="17" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="18" size="0.25" align="left"][/wppa] [wppa type="slideonly" album="19" size="0.25" align="left"][/wppa] </div></center>
- The topic ‘multiple wppa slideshows on one page’ is closed to new replies.