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

redndahead’s picture

Do 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.

WebMaster’s picture

I 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.

redndahead’s picture

1 of 4 is the slide counter. Not the pager. Use the Global: row count field for your pager.

AshleyF73’s picture

Thank 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/

jon betts’s picture

OK, 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?

redndahead’s picture

Status: Active » Postponed (maintainer needs more info)

You probably need at least activate slide and pause on pager hover. I think pause on click still needs to be implemented.

redndahead’s picture

Status: Postponed (maintainer needs more info) » Fixed
brightbold’s picture

A 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.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

DriesP’s picture

Guys 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!

DriesP’s picture

Status: Closed (fixed) » Active
DriesP’s picture

Anyone? 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!

DriesP’s picture

Status: Active » Closed (fixed)

Ok I figured it out.

.active .views-content-counter{}

pitbull mix’s picture

I 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!