How can I limit magnific-popup gallery to direct siblings? When I open an image from the first .child, I don’t want the images from the second .child to be in the gallery.
The html structure:
<div class="parent">
<div class="child">
<a class="image-link" href="img/red1.jpg"><img src="img/red1.jpg"></a>
<a class="image-link" href="img/red2.jpg"><img src="img/red2.jpg"></a>
<a class="image-link" href="img/red3.jpg"><img src="img/red3.jpg"></a>
<a class="image-link" href="img/red4.jpg"><img src="img/red4.jpg"></a>
<a class="image-link" href="img/red5.jpg"><img src="img/red5.jpg"></a>
</div>
<div class="child">
<a class="image-link" href="img/city1.jpg"><img src="img/city1.jpg"></a>
<a class="image-link" href="img/city2.jpg"><img src="img/city2.jpg"></a>
<a class="image-link" href="img/city3.jpg"><img src="img/city3.jpg"></a>
<a class="image-link" href="img/city4.jpg"><img src="img/city4.jpg"></a>
<a class="image-link" href="img/city5.jpg"><img src="img/city5.jpg"></a>
</div>
</div>
how I initialize Magnific-Popup:
$('.child').magnificPopup({
delegate: '.image-link',
type:'image',
gallery: {
enabled: true
}
});
If delegate option is used, only like so:
$('.child').each(function() {
$(this).magnificPopup({
delegate: '.image-link',
type:'image',
gallery: {
enabled: true
}
});
});
Related
This is Laravel 8.I set '/cart' route to href of add to cart button.but it also didn't work.got an error as 'session not found'.I made this while watching a youtube video.But it's not work.
What is the problem of my code?
Plz help me!
ShopComponent.php
<?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;
use Cart;
class ShopComponent extends Component
{
public function store($product_id,$product_name,$product_price){
Cart::add($product_id,$product_name,1,$product_price)->asseociate('App\Models\Product');
session()->flash('success_message','Item added in Cart');
return redirect()->route('product.cart');
}
public function render()
{
$products = Product::paginate(12);
return view('livewire.shop-component',['products'=>$products])->layout("layouts.base");
}
}
shop-component.blade.php
<div class="product-info">
<span>{{$product->name}}</span>
<div class="wrap-price"><span class="product-price">{{$product->regular_price}}</span></div>
Add To Cart
</div>
web.php
<?php
use App\Http\Livewire\HomeComponent;
use App\Http\Livewire\ShopComponent;
use App\Http\Livewire\CartComponent;
use App\Http\Livewire\CheckoutComponent;
use App\Http\Livewire\DetailsComponent;
use App\Http\Livewire\User\UserDashboardComponent;
use App\Http\Livewire\Admin\AdminDashboardComponent;
use Illuminate\Support\Facades\Route;
Route::get('/cart',CartComponent::class)->name('product.cart');
app.php
'aliases' => Facade::defaultAliases()->merge([
// 'ExampleClass' => App\Example\ExampleClass::class,
])->toArray(),
DetailsComponent.php
<?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Cart;
class DetailsComponent extends Component
{
public $slug;
public function mount($slug){
$this->slug=$slug;
}
public function store($product_id,$product_name,$product_price){
Cart::add($product_id,$product_name,1,$product_price)->asseociate('App\Models\Product');
session()->flash('success_message','Item added in Cart');
return redirect()->route('product.cart');
}
cart-component.blade.php
<div class=" main-content-area">
<div class="wrap-iten-in-cart">
#if(session::has('success_message'))
<div class="alert alert-success">
<strong>Success</strong>{{Session::get('success_message')}}
</div>
#endif
#if(Cart::count()>0)
<h3 class="box-title">Products Name</h3>
<ul class="products-cart">
#foreach(Cart::content() as $item)
<li class="pr-cart-item">
<div class="product-image">
<figure><img src="{{('assets/images/products')}}/{{$item->image}}" alt="{{$item->model->name}}"></figure>
</div>
<div class="product-name">
<a class="link-to-product" href="{{route('product.details',['slug'=>$item->model->slug])}}">{{$item->model->name}}</a>
</div>
<div class="price-field produtc-price"><p class="price">Rs.{{$item->model->regular_price}}</p></div>
<div class="quantity">
<div class="quantity-input">
<input type="text" name="product-quatity" value="{{$item->qty}}" data-max="120" pattern="[0-9]*" >
<a class="btn btn-increase" href="#"></a>
<a class="btn btn-reduce" href="#"></a>
</div>
</div>
<div class="price-field sub-total"><p class="price">Rs.{{$item->subtotal}}</p></div>
<div class="delete">
<a href="#" class="btn btn-delete" title="">
<span>Delete from your cart</span>
<i class="fa fa-times-circle" aria-hidden="true"></i>
</a>
</div>
</li>
#endforeach
</ul>
#else
<p>No Item In Cart</p>
#endif
</div>
I have list of comments and I could append username of user, content and date to the list put when I tried to append the user image it shows null and I tried to append image from internet and also it shows null
<ul v-for="comment in comments" :key="comment">
<li class="comment-object">
<div class="image-container">
<img class="profile-pic" :src="'http://192.168.63.200:8000' + comment.author_image" v-on:change="currentUserImage" alt="profile picture"/>
</div>
<div class="comment-text">
<h2 class="username" style="color: #C2C3C4">{{comment.author}} <span class="muted">· {{comment.publish}}</span></h2>
<p class="comment">{{comment.content}} </p>
</div>
</li>
</ul>
await axios.post('/video/api/video/comments/create/', commentData)
.then(response => {
this.comments.unshift({ content: this.commentContent, author: this.$store.state.user.username, author_image: 'https://image.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg', likes:0, publish:'now'})
})
The problem was in <img class="profile-pic" :src="'http://192.168.63.200:8000' + comment.author_image" v-on:change="currentUserImage" alt="profile picture"/>
I just removed the url http://192.168.63.200:8000 and it worked
My vue template:
<div
class="col-sm-4 col-xs-6 thumb"
v-for="(photo, index) in photos"
#click.prevent="check(index)"
>
<a class="thumbnail" :class="{'active': photo.checked}">
<img class="img-responsive" :src="photo.picture" alt="">
</a>
</div>
My check() method:
check(index) {
if(!("checked" in this.photos[index]))
this.photos[index].checked = true
else
this.photos[index].checked = !this.photos[index].checked
},
Everything seems correct but it's not working. What could the problem be?
Vue cannot detect changes to an index of an array.
Get a reference to the photo object of the index passed to check() and then use Vue.set() to update the array like so:
check(index) {
let photo = this.photos[index];
if (!("checked" in photo)) {
photo.checked = true
} else {
photo.checked = !photo.checked
}
Vue.set(this.photos, index, photo);
},
Here's a fiddle.
How about just #click.prevent="$set(photo, 'checked', !photo.checked)" and forget the handler?
<div class="col-sm-4 col-xs-6 thumb" v-for="(photo, index) in photos"
#click.prevent="$set(photo, 'checked', !photo.checked)">
<a class="thumbnail" :class="{'active': photo.checked}">
<img class="img-responsive" :src="photo.picture" alt="">
</a>
</div>
If you want to use the handler:
<div class="col-sm-4 col-xs-6 thumb" v-for="(photo, index) in photos"
#click.prevent="check(photo)">
And
check(photo) {
this.$set(photo, 'checked', !photo.checked)
},
I'm trying to use Tooltipster to show an image of hovered thumbnails that are in a loop. I've tried multiple ways to find the closest tooltip_templates class and show it, but am not having any success. Is there another way?
<li class="finish-swatch">
<img class="tooltip" data-tooltip-content=".tooltip_content" src="/img01.jpg" />
<div class="tooltip_templates">
<span class="tooltip_content">
<img class="tooltip-swatch" src="/img01.jpg" />
</span>
</div>
</li>
<li class="finish-swatch">
<img class="tooltip" data-tooltip-content=".tooltip_content" src="/img02.jpg" />
<div class="tooltip_templates">
<span class="tooltip_content">
<img class="tooltip-swatch" src="/img02.jpg" />
</span>
</div>
</li>
According to the docs (5. Use HTML inside your tooltips)
This should work:
<li class="finish-swatch tooltip" data-tooltip-content="#tooltip_content_1"></li>
<li class="finish-swatch tooltip" data-tooltip-content="#tooltip_content_2"></li>
<div class="tooltip_templates">
<li id="tooltip_content_1">
<img class="tooltip-swatch" src="/img01.jpg" />
</li>
<li id="tooltip_content_2">
<img class="tooltip-swatch" src="/img02.jpg" />
</li>
</div>
Note: it is not recommended to use the class 'tooltip' as it may conflict with Bootstrap or other styles but I left it as you had it.
Also, make sure your CSS includes:
.tooltip_templates { display: none; }
Finally, your jQuery should include:
$(document).ready(function() {
$('.tooltip').tooltipster();
});
That should do it. Let me know if you have any questions!
Thanks Jay. I also got this to work a couple of days ago. This is how I did it.
<div class="tooltip">
<span class="tooltip_content">
<img src="<?php echo $finish_image['value']; ?>" />
<p><?php echo $finish_name['value']; ?></p>
</span>
<img src="<?php echo $finish_image['value']; ?>" alt="<?php echo $image['alt'] ?>" />
</div>
jQuery('.tooltip').tooltipster({
trigger: 'custom',
triggerOpen: {
mouseenter: true,
touchstart: true
},
triggerClose: {
mouseleave: true,
tap: true
},
side: ['top'],
maxWidth: 200,
theme: ['tooltipster-shadow', 'tooltipster-shadow-customized'],
functionInit: function(instance, helper){
var content = jQuery(helper.origin).find('.tooltip_content').detach();
instance.content(content);
}
});
I need to print names of friends list of facebook account which are in the code.I am using java, webdriver, eclipse. so how can i do it..?
My code is:
hc_location=friends_tab">
<div class="clearfix _42ef">
<div class="_6a rfloat _ohf">
<div class="uiProfileBlockContent">
<div class="_6a">
<div class="_6a _6b" style="height:100px"/>
<div class="_6a _6b">
<div class="fsl fwb fcb">
<a data-hovercard="/ajax/hovercard/user.php?id=100004354923588&extragetparams=%7B%22hc_location%22%3A%22friends_tab%22%7D" data-gt="{"engagement":{"eng_type":"1","eng_src":"2","eng_tid":"100004354923588","eng_data":[]},"coeff2_registry_key":"0406","coeff2_info":"AatFZB3bSKV1-v1-TR2ok-dPAbN9rzl_3kU0pGsa25fiWaVHx5-bjHLWKDd3viMwgv1yaRLvlMdX3-X03tbhtjEZ","coeff2_action":"1","coeff2_pv_signature":"738277089"}" href="https://www.facebook.com/sivaramakrishna.churukuri?fref=pb&hc_location=friends_tab">Sivaramakrishna Churukuri</a>
</div>
<a class="uiLinkSubtle" data-gt="{"coeff2_registry_key":"0406","coeff2_info":"AauP9VE6r6RJg9RklXss8Ij7rBBpi8gQXqOJbBK3dhvJV9-qk6TEr1oJklIPahLAfMkkWVB_SIlPbQ6vlwDJIe13","coeff2_action":"13","coeff2_pv_signature":"738277089"}" href="https://www.facebook.com/sivaramakrishna.churukuri/friends">103 friends</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="_698">
<div class="clearfix _5qo4">
<a class="_5q6s _8o _8t lfloat _ohe" data-hovercard="/ajax/hovercard/user.php?id=100003212947042&extragetparams=%7B%22hc_location%22%3A%22friends_tab%22%7D" aria-hidden="true" tabindex="-1" href="https://www.facebook.com/kamesh.peri.5?fref=pb&hc_location=friends_tab">
<div class="clearfix _42ef">
<div class="_6a rfloat _ohf">
<div class="uiProfileBlockContent">
<div class="_6a">
<div class="_6a _6b" style="height:100px"/>
<div class="_6a _6b">
<div class="fsl fwb fcb">
<a data-hovercard="/ajax/hovercard/user.php?id=100003212947042&extragetparams=%7B%22hc_location%22%3A%22friends_tab%22%7D" data-gt="{"engagement":{"eng_type":"1","eng_src":"2","eng_tid":"100003212947042","eng_data":[]},"coeff2_registry_key":"0406","coeff2_info":"AauBaMRFF-E1ITEW9Rva9NO6xU67IbSuJZEgYIzHEB4CVZ_e6MM2fHCqF75opZvYnSlnHSOqYQ3EaZucFsMq6WMd","coeff2_action":"1","coeff2_pv_signature":"738277089"}" href="https://www.facebook.com/kamesh.peri.5?fref=pb&hc_location=friends_tab">Kamesh Peri</a>
</div>
<a class="uiLinkSubtle" data-gt="{"coeff2_registry_key":"0406","coeff2_info":"Aat-c_R0rmMkazYv1tQfMWB254d055vp_28IHeIbPNodi5AgjkwSKK0gxoikjPCHdstPnIZgBGM4DLQexsa3ctZ5","coeff2_action":"13","coeff2_pv_signature":"738277089"}" href="https://www.facebook.com/kamesh.peri.5/friends">374 friends</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="_698">
<div class="clearfix _5qo4">
<a class="_5q6s _8o _8t lfloat _ohe" data-hovercard="/ajax/hovercard/user.php?id=678773097&extragetparams=%7B%22hc_location%22%3A%22friends_tab%22%7D" aria-hidden="true" tabindex="-1" href="https://www.facebook.com/rchalasani?fref=pb&hc_location=friends_tab">
<div class="clearfix _42ef">
<div class="_6a rfloat _ohf">
<div class="uiProfileBlockContent">
<div class="_6a">
<div class="_6a _6b" style="height:100px"/>
<div class="_6a _6b">
<div class="fsl fwb fcb">
<a data-hovercard="/ajax/hovercard/user.php?id=678773097&extragetparams=%7B%22hc_location%22%3A%22friends_tab%22%7D" data-gt="{"engagement":{"eng_type":"1","eng_src":"2","eng_tid":"678773097","eng_data":[]},"coeff2_registry_key":"0406","coeff2_info":"AasX8OsfTavfyAhEpE-iOv9PuaD2vgAhBs9ByrQ72VN1TWGanfz8Cc6UlLt7hsMf-Js","coeff2_action":"1","coeff2_pv_signature":"738277089"}" href="https://www.facebook.com/rchalasani?fref=pb&hc_location=friends_tab">Rama Chalasani</a>
</div>
<a class="uiLinkSubtle" role="button" rel="dialog" href="/browse/mutual_friends/?uid=678773097" ajaxify="/ajax/browser/dialog/mutual_friends/?uid=678773097" data-tooltip-uri="/ajax/mutual_friends/tooltip.php?friend_id=678773097" data-hover="tooltip">24 mutual friends</a>
I need to print Sivaramakrishna Churukuri, Kamesh Peri, Rama Chalasani which are in
<a></a>
tags
Thanks in advance.
I have tried this
driver.findElement(By.id("email")).sendKeys("smallfishhh4#gmail.com");
driver.findElement(By.id("pass")).clear();
driver.findElement(By.id("pass")).sendKeys("password");
// driver.findElement(By.id("u_0_n")).click();
driver.findElement(By.xpath("//label[#id='loginbutton']/input")).click();
driver.findElement(By.className("headerTinymanName")).click();
driver.findElement(By.xpath("//a[#data-medley-id='pagelet_timeline_medley_friends']")).click();
// List<WebElement> ele = driver.findElement(By.className("fsl fwb fcb"));
List<WebElement> allNames = driver.findElements(By.xpath("//div[#class='fsl fwb fcb']/a"));
//List<WebElement> allNames = driver.findElements(By.xpath("//div[#class='uiProfileBlockContent']/a"));
int num = driver.findElements(By.xpath("//ul")).size();
System.out.println(num);
System.out.println(allNames.size());
for(int j=0; j<num; j++){
for(int i=0;i<allNames.size();i++){
System.out.println(allNames.get(i).getText());
names = names+allNames.get(i).getText();
}
}
Get friend list using Selenium is web scraping and you should not do it, its illegal. Instead use the graph api with Java to achieve your goal. Below is one example. Another option you can use is RestFB(http://restfb.com/legacy-rest-api.html)
public void getIds(){
Session session = Session.getActiveSession();
String query = "select uid from user where uid in (select uid2 from friend where uid1 = me())";
Bundle params = new Bundle();
params.putString("q", query);
Request request = new Request(session, "/me/friends", params, HttpMethod.GET, new Request.Callback() {
#Override
public void onCompleted(Response response) {
Log.d("Id's :", "Response = "+response);
}
});
Request.executeBatchAsync(request);
}