Closed (fixed)
Project:
Views Slideshow
Version:
7.x-3.x-dev
Component:
Miscellaneous
Priority:
Normal
Category:
Support request
Assigned:
Unassigned
Reporter:
Created:
16 Jan 2011 at 14:00 UTC
Updated:
15 Mar 2013 at 01:13 UTC
Hi,
I have been trying to get Views Slideshowing working, which I have managed to do, and get it working good with my CSS. However, the default settings for the controls are simple text fields, not linked and also the slideshow counter shows 1 of 4, is it possible to change that to 4 css buttons, i.e. 1 2 3 4?
Thanks.
Script settings:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/d10\/","ajaxPageState":{"theme":"marinelli","theme_token":"ObJk46Vxrln9-0qmGsqeNbzTcdTdDl82-5G-_jPfMzE","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/ui\/jquery.ui.core.min.js":1,"misc\/jquery.ba-bbq.js":1,"modules\/overlay\/overlay-parent.js":1,"modules\/contextual\/contextual.js":1,"misc\/jquery.cookie.js":1,"modules\/views_slideshow\/js\/views_slideshow.js":1,"sites\/all\/libraries\/jquery.cycle\/jquery.cycle.all.min.js":1,"modules\/views_slideshow\/contrib\/views_slideshow_cycle\/js\/views_slideshow_cycle.js":1,"themes\/marinelli\/js\/hoverintent\/hoverintent.js":1,"themes\/marinelli\/js\/menu\/marinelli_menu.js":1,"themes\/marinelli\/js\/cycle\/cycle.js":1,"themes\/marinelli\/js\/banner\/marinelli_configure_cycle.js":1,"modules\/toolbar\/toolbar.js":1,"themes\/marinelli\/js\/marinelli_marinelli.js":1,"themes\/marinelli\/js\/topregion\/marinelli_topregion.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/contextual\/contextual.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"modules\/ctools\/css\/ctools.css":1,"modules\/views_slideshow\/contrib\/views_slideshow_cycle\/views_slideshow_cycle.css":1,"modules\/views\/css\/views.css":1,"themes\/marinelli\/css\/grid\/grid_960.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"themes\/marinelli\/css\/reset\/reset.css":1,"themes\/marinelli\/css\/common.css":1,"themes\/marinelli\/css\/links.css":1,"themes\/marinelli\/css\/typography.css":1,"themes\/marinelli\/css\/forms.css":1,"themes\/marinelli\/css\/drupal.css":1,"themes\/marinelli\/css\/layout.css":1,"themes\/marinelli\/css\/primary-links.css":1,"themes\/marinelli\/css\/advertise.css":1,"themes\/marinelli\/css\/secondary-links.css":1,"themes\/marinelli\/css\/blocks.css":1,"themes\/marinelli\/css\/node.css":1,"themes\/marinelli\/css\/comments.css":1,"themes\/marinelli\/css\/print\/print.css":1}},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"ajaxCallback":"overlay-ajax"},"viewsSlideshow":{"slideshow-block_1":{"methods":["viewsSlideshowPagerFields","viewsSlideshowControlsText","viewsSlideshowSlideCounter","viewsSlideshowCycle"],"paused":0}},"viewsSlideshowCycle":{"#views_slideshow_cycle_main_slideshow-block_1":{"num_divs":2,"id_prefix":"#views_slideshow_cycle_main_","div_prefix":"#views_slideshow_cycle_div_","vss_id":"slideshow-block_1","effect":"fade","transition_advanced":0,"timeout":5000,"speed":700,"delay":0,"sync":1,"random":0,"pause":1,"pause_on_click":0,"start_paused":0,"remember_slide":0,"remember_slide_days":1,"pause_when_hidden":0,"pause_when_hidden_type":"full","amount_allowed_visible":"","nowrap":0,"fixed_height":1,"items_per_slide":1,"wait_for_image_load":1,"cleartype":0,"cleartypenobg":0,"advanced_options":"{}","action_advanced":0}},"marinelli":{"bartext":"Slide Down","bartext2":"Slide Up","banner_effect":"fade","banner_speed":"1000","banner_delay":"4000","banner_pause":1},"tableHeaderOffset":"Drupal.toolbar.height"});
//--><!]]>
</script>
Comments
Comment #1
redndahead commentedDo you have an example. I have had other reports of this, but no sites to look at. Although the controls are span tags they are clickable.
Comment #2
WebMaster commentedI too would also like to know how to make the pager display 1 - 2 -3 -4 ... etc rather than 1 of 4. Other than that, the D7 version of this module, even as a dev release, has fulfilled all my needs and has been solid thus far.
Comment #3
redndahead commented1 of 4 is the slide counter. Not the pager. Use the Global: row count field for your pager.
Comment #4
AshleyF73 commentedThank you for your replies. I don't think it is the slide counter, or pager that I need. The slide counter only shows '1 of 4' and the pager only shows the slide number, '1' but instead I wanted to be able to display links to all four slides at the bottom, maybe text but ideally as four small buttons like the counter on the Whitehouse slideshow: http://www.whitehouse.gov/
Comment #5
jon betts commentedOK, I was able to get most of the way there. Here is what I did:
!. Added the field, "Global: View result counter" to the bottom of my list of Fields.
2. Selected "Rewrite output of this field" and then "Output this field as a link". (this is where my issue lies, for now I just added a # in the link path field so I would get anchor tags that I could style with CSS)
3. Under Style Settings, I clicked the gear icon next to the Slideshow style. I then scrolled down and selected Pager in the Bottom Widgets section; selected the default fields and then selected the Global: View result counter field.
4. Make sure Use pager: All items is also set under Basic settings.
Once I did all of this and added the appropriate CSS, I was able to get little round dots that change color based on which slide is active. Works just like, http://www.lullabot.com/. However, I have no idea what value should be placed in the link field to arbitrarily go from one slide to another.
Can anyone help with this?
Comment #6
redndahead commentedYou probably need at least activate slide and pause on pager hover. I think pause on click still needs to be implemented.
Comment #7
redndahead commentedComment #8
brightboldA few tips for anyone else having trouble with this. First, make sure you have the latest dev release, as alpha1 is not properly applying the "active" class per #1090150: active pager not styled, Widget settings' blank. If you haven't done this you won't be able to style the pager. That plus glowsinthedark's instructions should do it for you.
Comment #10
DriesP commentedGuys what's the css line for the active pager? I can't figure it out with firebug.
I already created 4 pager bulletins using the following css:
Works great, but how do I style the active one?
Thanks!
Comment #11
DriesP commentedComment #12
DriesP commentedAnyone? I don't want to be annoying, but if I got this my site is finished :)
What's the css line for the active pager? I can't figure it out with firebug.
I already created 4 pager bulletins using the following css:
.casestudy .views-field-counter {
width: 13px;
height: 13px;
display: block;
background: green; (HERE COMES THE BG FOR THE BULLETIN)
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0pt 0pt;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
cursor: pointer;
text-indent: -9999px;
}
Works great, but how do I style the active one?
Thanks!
Comment #13
DriesP commentedOk I figured it out.
.active .views-content-counter{}
Comment #14
pitbull mix commentedI would like to have buttons for the slide show on my site. So far I have had no luck. If you can provide any insight as to what settings and css changes I should make, please let me know.
http://www.attollointelligence.com
Thank you!