jquery - Add next / prev image caption to slider navigation buttons -

-

i'm trying make next , previous buttons in slider show caption next , previous images, respectively. should when hover on next button caption next image in slider appears. ditto previous button.

i've got slider created gallery field in advanced custom fields. have multiple sliders on same page, using same markup. difference background images, , captions of each image. markup simplified below, imagine 3-4 iterations of code below on 1 page (again, thing different between each iteration of slider background images , captions)

<div class='theslider'> <div class="controls">      <button class="prev"></button>      <button class="next"></button> </div> <div class="the-slides">    <ul>      <li><div class='slide' style="background-image...">          <span>item caption 1</span>          </li>      <li><div class='slide' style="background-image...">          <span>item caption 2</span>         </li>      <li><div class='slide' style="background-image...">          <span>item caption 3</span>      </li>   </ul> </div>

i trying use jquery .clone , .html functions move captions slide li elements slider buttons.

the way slider works, current image first li element. therefore, "next" button should have caption "li:nth-child(2)" , "previous" button should have caption "li:last-child".

i've been able progress following:

var $thecaption = jquery('li:nth-child(2) span'); var $button = jquery($thecaption).closest('.theslider').find('button.next'); var $nextcaption = jquery($thecaption).clone(); jquery($button).html($nextcaption);

but end result next button captions every slider on page. 

<button class="next">     <span>caption 2</span>     <span>caption 2</span>     <span>caption 2</span> </button>

how specify caption shares same parent element ".slider" target next button gets moved button?

any appreciated. in advance.

i figured out. using wrong element use common ancestor ensure $button , $thecaption part of same slider.

*note: slider button wrapped in span class "control_next". 

<span class="control_next">    <button class="next"></button> </span>

using button "control_next" element trigger able to...

a: move along it's ancestors find closest parent ".theslider", there find caption child of ".theslider" parent, '.slides-list li:nth-child(2) span'.

var $thecaption = jquery(this).closest('.theslider').find('.slides-list li:nth-child(2) span');

b: find span caption placed, using same origin (the trigger)

var $button = jquery(this).find('.btn-caption.right');

c: clone caption, , set variable placed. 

var $nextcaption = jquery($thecaption).clone();

d: execute on each slide. (the slider shifts li elements, appending last li slide top , on slides cycled through: slider code based on this)

here's working code below:

jquery(document).ready(function(){ jquery('.control_next').mouseenter(function() { var $thecaption = jquery(this).closest('.theslider').find('.slides-list li:nth-child(2) span'); var $button = jquery(this).find('.btn-caption.right'); var $nextcaption = jquery($thecaption).clone(); jquery($targetbutton).html($nextcaption); }); });

Comments

Post a Comment

Popular posts from this blog

qt - Using float or double for own QML classes -

-
i've created components , helper methods using c++ , qt used in qml gui. of methods calculate gui elements (size, transformations, scene graph items creation). target arm 32 bit using opengl / eglfs render output. opengl using float , qml using real (defined double ). what should use in c++ do not lose precision? if use qreal ( double ) shouldn't lose precision. if git grep float in qtbase.git , can find out bit more: dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0-* important behavior changes * dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0- dist/changes-5.2.0- - qt compiled qreal typedef'ed double on dist/changes-5.2.0: platforms. qreal float on arm chipsets before. guarantees more dist/changes-5.2.0- consistent behavior between platforms qt supports, binary dist/chan...
Read more

Create Outlook appointment via C# .Net -

-
i need create outlook appointment using microsoft.office.interop.outlook , while can work locally on own workstation , works if run web application via server's browser, not work when connect server externally. hence, think might permission issue. i changed application pool identity " localsystem " don't access denied error. unfortunately, doesn't work. the app behaves if appointment created, appointment doesn't appear in outlook. here include file on top of aspx.cs page using outlook = microsoft.office.interop.outlook; here code using pop appointment. outlook.application apptapp = new outlook.application(); outlook.appointmentitem appt = apptapp.createitem(outlook.olitemtype.olappointmentitem) outlook.appointmentitem; appt.subject = txtfirstname.text + " " + txtlastname.text; appt.body = txtcomment.text; appt.alldayevent = false; appt.start = datetime.parse(txtreminderdate.text + " 8:00 am"); appt.end = datetime.p...
Read more

ios - Swift Array Resetting Itself -

-
i have 2 arrays: pointhistory , datehistory . have nstimer , , when timer runs out, action called. in action appending int pointhistory , , current date string datehistory . here timer action: func timeraction() { let steppervalue = int(stepper.value) employee.numberofpoints = steppervalue networking.saveemployee(employee, completion: { (error) -> void in if error != nil { let alert = uialertcontroller(title: "error", message: "there error updating \(self.employee.name)'s points", preferredstyle: .alert) let alertaction = uialertaction(title: "ok", style: .cancel, handler: nil) alert.addaction(alertaction) self.presentviewcontroller(alert, animated: true, completion: nil) } }) var dateformatter = nsdateformatter() dateformatter.dateformat = "mm-dd-yyyy" dateformatter.timezone = nstimezone.localtimezone() var date = nsdate() var ...
Read more